Question

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.

Answer 1

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/