2012-08-06 36 views
3

這是我的頁面的側邊菜單小碼作爲HTML中的按鈕顯示錨點標籤爲全寬度?

<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一個風格 - 告訴如何看到每個錨標記,我試過display:table-cell property,但它對我無效

覆蓋告訴側面菜單怎麼會

.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; 
} 

我想要顯示的錨標記側面菜單的整個寬度,怎麼做呢?

+0

你的意思是顯示:block? – 2012-08-06 05:38:43

+0

yes,display:block works,但是當我將鼠標懸停在菜單上時,它很快就會從菜單中消失,導致它從疊加層中脫離出來,如何解決這個問題? – 2012-08-06 05:41:07

回答

25

使用此:

display:inline-block; 
width: 100%; 

通過內嵌說塊,你讓自己定義爲元素的寬度。內聯元素不能做到這一點是默認的。