CSS：子元素的动态宽度，以适合父宽度

Question

编写CSS时，我总是发现自己缺少浮动子元素的自动子宽度特征，以使其总宽度适合父元素的宽度。
事实上，我发现很难在谷歌搜索框中发表短语，所以你可以考虑这个例子：
ul包含四个li li有float: left; list-style: none;，因为有li个元素，每个元素都有width: 25%;个 如果我想将li元素的数量变为可变而不是固定的 4 ，那么li在 5 时会获得20％的宽度，该怎么办？ >，如果 10 ，则宽度为10％，当 2 等时，宽度为50％？鉴于ul始终具有明确的固定宽度。

Answer 1

您可以使用css3的弹性框。

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

这是一个演示的jsfiddle（您可能需要将-webkit更改为-moz或-o）http://jsfiddle.net/wKKte/

Answer 2

尝试display：table;

这是一个小提琴：

http://jsfiddle.net/7D5cM/