Строка меню не растягивается Полная длина ячейки

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%

CSS-код, который вы должны компилирует дать TestMenu ширину на 100%, а затем вы должны явным образом расскажу 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; 

}