元素宽度基于存在多少兄弟姐妹答案

【问题标题】：Element width based on how many siblings are present元素宽度基于存在多少兄弟姐妹
【发布时间】：2012-08-03 06:22:11
【问题描述】：

假设我有一个 500px 的 ul。说孩子李的左浮动。有没有办法编写 css，所以 li 永远不会进入第二行，而是根据存在的 li 填充 ul 的 500px 宽度？

例如。

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

li 会占据整个 500px

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

2 里将分割宽度。基本上每个 250px 每个

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

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

谢谢！

【问题讨论】：

【解决方案1】：

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

li {
    display: table-cell;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：