将锚标记显示为全宽,作为HTML中的按钮？

Question

这是我页面侧边菜单的小代码

<div style="display: block;" id="overlay" class="overlay">
    <div id="sideMenuGroups">
    <div id="sideMenuGroupHeader" class="mSideMenuSeparator">GROUPS</div>
      <div id="sideMenuGroupContent" class="mSideMenuContent">
           <div id="teacherGroup">As Teacher
             <a onclick="groupFeeds();" href="#">Data Mining</a>
             <a onclick="groupFeeds();" href="#">Data Structures</a>
             <a onclick="groupFeeds();" href="#">C Language</a>
              //**display anchor tag to full width of overlay**
             <a onclick="groupFeeds();" href="#">Introduction to IT</a>
           </div>
          </div>  
    </div>
    </div><!--overlay ends here-->

使用的样式的CSS是

*mSideMenuConten*t没有定义样式

mSideMenuContent a - 告诉每个锚标签是如何可见的,我试过 显示:table-cell属性,但对我来说无效

叠加说明侧边菜单的方式

.mSideMenuContent
{

}
.mSideMenuContent a
{
    display: table-cell;
    height: 37px;
    color: #c4ccda;
    padding: 3px 0 3px 8px;
    font-size: small;

}
.mSideMenuContent a:hover
{
  background:#262c3a;
  color: #c4ccda;
}   
.mSideMenuSeparator
{
    background: #434b5c;
    border-top: 1px solid #242a37;
    border-bottom: 1px solid #242a37;
    font-family:Helvetica, sans-serif;
    font-size:x-small;
    color: #7a8292;
    height:17px;
    padding-top:4px;
    padding-left: 10px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .6)
}
    .overlay {
    z-index: 1000;
    position: absolute; 
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background:#31394a;;
    color: #c4ccda;
    display: none;
}

我想将锚标签显示到侧边菜单的全宽,我该怎么做？

Answer 1

用这个:

display:inline-block;
width: 100%;

通过说内联块,您可以自己定义元素的宽度.内联元素不能默认这样做.