html - 用多个列表元素填充水平列表

Question

所以我需要制作一个水平列表，其中第一个列表元素具有固定宽度，最后一个列表元素应填充可用宽度。问题是最后一个元素填满了整行，即使我为第一个元素设置了 width。为什么第二个元素忽略了第一个元素的宽度？

html

<div id="wrapper">
    <ul>
       <li />
       <li />
    </ul>
</div>

CSS

#wrapper {
    width: 200px;
    height: 20px;
}

ul {
    display:table;
    width: 100%;
    height: 100%;
}

li:first-child {
    background:red;
    width: 30px;
}

li:last-child {
    background:blue;
    width: 100%;
}

li {
    display:table-cell;
}

Answer 1

在你的 JSFiddle 中，你告诉最后一个 li 元素应该使用整个宽度

li:last-child {
    width: 100%;
}

您可以省略 width 属性，因为它无论如何都会使用剩余的宽度。见修改 JSFiddle