CSS的子行項目未設置爲特定寬度

我試圖讓子菜單的外觀均勻，像THICSS的子行項目未設置爲特定寬度

| MENU | 
|SUB MENU 1| 
|SUB 2  | 
|ANOTHER |

的問題是，它顯示的是這樣

| MENU | 
|SUB MENU 1| 
|SUB 2| 
|ANOTHER|

這裏是我的CSS

#tabs { 
    margin-top:-12ex; 
    float:left; 
    width:100%; 
    font-size:100%; 
    line-height:10px; 
    vertical-align:top; 
    margin-left:20px; 
    position:static; 
    } 

#tabs ul { 
    margin:0; 
    padding:1px 1px 0 20px; 
    list-style:none; 
    } 

#tabs li { 
    display:inline; 
    margin:0; 
    padding:5; 
    } 

#tabs a { 
    float:left; 
    background:url("../images/tableft.gif") no-repeat left top; 
    margin:0; 
    padding:0 0 0 3px; 
    text-decoration:none; 
    } 

#tabs a span { 
    float:left; 
    display:block; 
    background:url("../images/tabright.gif") no-repeat right top; 
    padding:10px 10px 10px 10px; 
    color:#FFF; 
    } 

/* Commented Backslash Hack hides rule from IE5-Mac \*/ 
#tabs a span {float:none;} 

/* End IE5-Mac hack */ 
#tabs a:hover span { 
    color:#FFF; 
    } 

#tabs a:hover{ 
    background-position:0% -42px; 
    } 

#tabs a:hover span { 
    background-position:100% -42px; 
    } 

div#tabs>ul>li { 
     display:block; 
     position:relative; 
     float:left; 
     list-style:none; 
    } 

div#tabs>ul>li ul{ 
      position:absolute; display:none; 
      list-style:none;  
     } 

div#tabs>ul>li>a{ 
       display:block; 
     } 

    div#tabs>ul>li:hover ul{ 
     display:block; 
     z-index:500; 
     width:50%; 
     margin:28px 0px 0px -20px;  
     width:100%; 
     }

這裏是我的HTML

<div id="tabs"> 
    <ul> 
     <li><a href="#"><span>HOME</span></a></li> 
     <li><a href="#"><span>MENU</span></a> 
      <ul> 
       <li><a href="#"><span>Desserts</span></a></li> 
       <li><a href="#"><span>Meats</span></a></li>   
      </ul> 
     </li> 
     <li><a href="#"><span>ABOUT US</span></a></li> 
     <li><a href="#"><span>CONTACT US</span></a></li> 
    </ul> 
</div>

來源

2011-09-12 userORTXD97HS

你並不需要有span是清單裏面的物品（他們內聯和服務在這種情況下沒有意義）。

而且，將它們設置爲一個特定的統一寬度，你需要的子菜單設置爲特定寬度，像這樣：

div#tabs ul li ul a{ 
    display:block; 
    width: 225px; 
}

請記住，你並不需要那麼多的直接子選擇器（>）。這將使IE6關閉。雖然有特定的時間來使用這些選擇器，但您的CSS具有足夠的特殊性，可以將其中的大部分留出。

來源

2011-09-12 03:43:30

只是增加寬度到這個

#tabs a { 
    width:100%; 
}

來源

2011-09-12 03:49:52

使用「最小寬度」爲李。其中李是最大的，那麼你使用該寬度作爲最小寬度。然後菜單的寬度看起來差不多。

來源

2011-09-12 06:56:14

CSS的子行項目未設置爲特定寬度

回答

相關問題