CSS: динамическая ширина дочерних элементов для соответствия родительской ширине

Question

При написании CSS я всегда обнаруживаю, что у меня отсутствует функция автоматической дочерней ширины плавающих дочерних элементов, чтобы соответствовать их общей ширине ширине родительского элемента.
На самом деле мне сложно сформулировать фразу в окне поиска Google, поэтому вы можете рассмотреть этот пример:
A ul содержит четыре li
li имеет float: left; list-style: none;, и поскольку имеется четыре li элемента, каждый имеет width: 25%;
Что делать, если я хочу сделать число элементов li переменным, а не фиксированным four , поэтому li получит ширину 20%, когда они равны пять , или получит ширину 10%, если они десять , или ширина 50%, когда они два и т. Д.? Учитывая, что ul всегда имеет явную фиксированную ширину.

Answer 1

Возможно, вы сможете использовать flex-box css3.

ul{display:box;}
li{box-flex:1;}

Вот jsfiddle для демонстрации (вам может потребоваться изменить -webkit на -moz или -o) http://jsfiddle.net/wKKte/

Answer 2

Попробуйте отобразить: таблица;

Вот скрипка с ним:

http://jsfiddle.net/7D5cM/