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。这样做可以得到预期的结果，看看Olaf Dietsche的小提琴。

Answer 4

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

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

4 个答案: