css - 元素宽度基于存在多少兄弟姐妹

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>

会把它分成3种方式等等......

谢谢你！

Answer 1

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

li {
    display: table-cell;
}

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

Answer 2

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

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