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

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

Answer 2

将其添加到您的css中：

li:first-child{
    display: inline-block;
}

此致：）

Answer 3

不要为最后一个元素设置width。

如果未设置CSS width属性，则会将其设置为默认值auto。这样你就得到了预期的结果，看看奥拉夫·迪舍的小提琴。

Answer 4

感谢所有的答案！后来我注意到，如果我将min-width添加到第一个li中，我就会得到我想要的。