css - 如何使浮动 LI 平等地共享其父 UL 宽度？

Question

提前说明：我在提问之前确实寻找过答案，但我发现没有一个能准确解释如何正确地做到这一点。

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

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

我在这里创建了一个JSFiddle。

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

score 3 · Accepted Answer

在 UL 和LI 上使用display: table;with ：width: 100%;display: table-cell;

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

1 回答 1