html - 水平方向的瓷砖是否可以在 CSS 中拉伸其父级的宽度？

Question

如果我在 HTML 中有这个布局：

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

使用这个 CSS：

div
{
    width: 200px;
    overflow: hidden;
}

ul
{
    list-style: none;
    height: 100px;
}

li
{
    display: block;
    width: 100px;
    height: 100px;
    float: left;
}

我希望将<ul>其拉伸到其内容的大小（400px），而不是将两个<li>元素包裹到下一行。

这可能与 CSS 吗？我一直只是<li>用 JavaScript 计算元素并设置<ul>宽度。

Answer 1

这应该这样做（见小提琴；当然，它隐藏了一些因为你overflow: hidden在 div 上，删除它，你会看到它正在工作）：

ul
{
    list-style: none;
    height: 100px;
    white-space: nowrap;
}

li
{
    display: inline-block;
    width: 100px;
    height: 100px;
}

尽管要真正获得ul拉伸的大小（它不仅仅使用上面的代码），它还需要具有display: inline-block（参见小提琴）或float应用（参见小提琴）以使其具有其内容的大小。

Answer 2

当你<li>像那样漂浮时，你有效地将它从<ul>. 你确定那是你想做的吗？为什么不只是浮动整个列表？