18

これは私のページのサイドメニューの小さなコードです

<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 - 各アンカー タグがどのように表示されるかを示します 。display :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;
}

サイドメニューの幅いっぱいにアンカータグを表示したいのですが、どうすればいいですか??

4

1 に答える 1

56

これを使って：

display:inline-block;
width: 100%;

インライン ブロックと言うと、要素の幅を自分で定義できます。インライン要素は、デフォルトではこれを行うことができません。

于 2012-08-07T18:33:41.363 に答える