html - CSS2:如何实现100％宽度的UL和灵活的子级LI，每个子级LI之间都有固定的宽度余量？

基本上我想知道如何做到这一点：



一个100% UL，带有5个20%（浮动）LI子级，中间有3px个间隙。 LI必须具有灵活的（％）宽度，以便可以调整大小，但其间隙必须固定。

这可以使用CSS3 width: calc(20%-3px)完成，但是我需要更多基本的CSS2支持。 :(

请问最干净的方法是什么？

最佳答案

好吧，这是可以解决的，因为它使用容器的背景色作为边框，但是可以按预期工作（并使用CSS2.1）。



jsFiddle Demo

.outer {
    background: lime;
    border: 2px solid black;
    display: table;
    width: 100%;
}
.inner {
    display: table-cell;
    background: green;
    width: 20%;
    height: 50px;
    border-left: solid 3px lime;
}
.inner:first-child {
    border-left: none;
}