CSS: dynamic width of child elements to be fit the parent width

When writing CSS, I always find myself missing auto child width feature of floated child elements, to fit their total width to the parent's width.

In fact I find it hard to phrase in Google search box, so you may consider 开发者_如何转开发this example:

A ul contains four li

li has float: left; list-style: none; and because there are four li elements, each has width: 25%;

What if I want to make the number of li elements variable, instead of fixed four, so li gets width of 20% when they are five, or gets width of 10% if they are ten, or width of 50% when they are two etc..? Given that the ul has an explicit fixed width always.

---

You might be able to use css3's flex-box.

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

Here's a jsfiddle to demonstrate(you may need to change -webkit to -moz or -o) http://jsfiddle.net/wKKte/

---

Try display: table;

Here's a fiddle with it:

http://jsfiddle.net/7D5cM/