基于存在多少个兄弟姐妹的元素宽度

Question

假设我有500px的ul。说孩子李是浮着的。有没有一种方法可以编写css，这样li就不会去第二行，而是根据有多少个li来填充ul的500px宽度？

例如。

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

锂会占用整个500px的

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

2里将分裂宽度。基本上每个250像素每

<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支持的旧式语法。