菜單欄不拉伸全長的單元格

Question

我有一個菜單欄不是拉伸它所在的div的整個長度。我有6個主菜單選項，我希望這些拉伸整個div標籤，它們是而不是僅僅考慮單詞的確切間距。我試圖將div和菜單元素設置爲100％寬度，但沒有任何工作。我的代碼列在下面。

CSS

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

li { 
    float: left; 
} 

a:link,a:visited { 
    display: block; 
    width: 100%; 
    font-weight: bold; 
    color: #FFFFFF; 
    background-color: #98bf21; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

a:hover,a:active { 
    background-color: #7A991A; 
} 

.testmenu { 
    width: 100%; 
} 

HTML

<div class="testmenu"> 
    <ul> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li><a href="#about">About</a></li> 
    </ul> 
</div> 

Answer 1

下面是我從你的代碼所做的編輯：

http://jsfiddle.net/fatgamer85/grLkE/

我加幾類列表和列表項。 我所做的列表寬度100％，以填補區域（我假設菜單欄？），然後取出從列表項浮動，使他們行內，並添加填充到項目

.menu-item{ 
    display: inline-block; 
    padding: 2%; 
} 

和這是它的外觀：

http://jsfiddle.net/fatgamer85/grLkE/embedded/result/

希望這有助於。

Answer 2

變化

li{float:left;} 

到

li{display:inline-block;width:25%;margin:0;padding:0;} 

Fiddle here.

Answer 3

可以給UL的100％的寬度，然後將鋰每個的25％

，你必須編譯，得到testmenu 100％的寬度的CSS的寬度，然後，你必須明確地告訴UL和LI他們應該有多少寬度。

Answer 4

ul { 
    list-style-type: none; 
    overflow: hidden; 
display:table-row; 
} 

li { 
display:table-cell; 
border:1px solid black; 
} 

a:link,a:visited { 
    display: block; 
    width: 100%; 
    font-weight: bold; 
    color: #FFFFFF; 
    background-color: #98bf21; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

a:hover,a:active { 
    background-color: #7A991A; 
} 

.testmenu { 
    width: 100%; 
display:table; 
table-layout:auto; 

}