Выращивайте флотируемые элементы для размещения внутри

Question

Я хотел бы использовать полную ширину UL-элемента для плавающих LI-элементов. Возможно ли это с использованием% -значений для заполнения LI-элементов? Я не могу использовать фиксированную ширину для LI, так как контент не имеет одинаковой длины.

Это мой HTML код:

<ul> 
    <li>January</li> 
    <li>February</li> 
    <li>March</li> 
    <li>April</li> 
    <li>May</li> 
    <li>June</li> 
    <li>...</li> 
</ul> 

И вот идет мой CSS:

ul { 
    overflow: auto; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 600px; 
    background-color: blue; 
} 

li { 
    float: left; 
    padding-left: 3%; 
    padding-right: 3%; 
    background-color: #dd0000; 
    border-left: 1px solid #ffffff; 
} 

li:hover { 
    background-color: #ff0000; 
} 

Найти пример на JsFiddle: http://jsfiddle.net/6Uy4y/ Так красные LI-элементы должны закончиться, где синий UL заканчивается даже при изменении ширины UL.

Спасибо, что направили меня в правильном направлении!

Answer 1

Похоже, что это начало табличных данных. Я бы использовал <table>. Если я ошибаюсь, вы можете подделать таблицу с помощью CSS.

ul { 
    display: table; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

li { 
    display: table-cell; 
    padding: 0 3%; 
} 

Вот быстрый немного демо: http://jsbin.com/iwacum/1/edit