Question

前面的提示：我在询问之前确实找到了答案，但我发现没有一个能够准确地解释如何做到这一点。

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

我尝试了各种解决方案，例如LI上的内联块，以及LI上的左边和自动宽度

我在这里创建了JSFiddle。

我如何实现所需的结果（不使用JS）以及至少主要的跨浏览器兼容性？

Answer 1

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

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