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

Question

提前注意:我在提问之前确实寻找了答案，但我发现没有一个准确地解释了如何正确地做到这一点。

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

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

我创建了一个 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/