css - 如何使 float LI 平均共享其父 UL 宽度？

Question

前面的注释:我在提问之前确实寻找过答案，但我发现没有一个答案准确地解释了如何正确执行此操作。

我有一些 DIV，在我的某个地方有一个 UL，它应该延伸到父 DIV 的 100％，并且在 UL 中我有一定数量的 LI 元素(由于动态内容而变化)希望平等分享父 UL 提供给他们的空间(显然应该是 100%)。

我尝试了各种解决方案，例如 LI 上的 inline-block，以及 LI 上的 float:left 和自动宽度

我创建了一个JSFiddle在这里。

我怎样才能达到预期的结果(不使用JS)和至少主要的跨浏览器兼容性？

Answer 1

在 UL 上使用 display: table; 以及 width: 100%;，在 LI 上使用 display: table-cell;:

ul {
    display: table;
    width: 100%;
}
li {
    display: table-cell;
    background: #eee;
}

http://jsfiddle.net/Kyle_Sevenoaks/EfWze/1/