元素宽度取决于存在多少兄弟姐妹

Question

说我有一个500px的ul。说孩子李是漂浮的。有没有办法写css所以li永远不会去第二行但是根据有多少li来填充ul的500px宽度？

例如。

<ul>
   <li>test</li>
</ul>

li会占用整个500px

<ul>
   <li>test</li>
   <li>test</li>
</ul>

2 li会分开宽度。基本上每个250px

<ul>
   <li>test</li>
   <li>test</li>
   <li>test</li>
</ul>

会分三种方式......

谢谢你！

Answer 1

ul {
    width: 500px;
    display: table;
}

li {
    display: table-cell;
}

这是小提琴：http://jsfiddle.net/WhbuQ/

Answer 2

当Flexbox最终确定/更好地实施时，它将提供一个不错的选择。

fiddle使用当前Gecko / Webkit支持的旧式语法。