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

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>拉伸(stretch)到其内容的大小 (400px)，而不是 <li> 中的两个元素回绕到下一行。

这可以用 CSS 实现吗？我一直只数<li>使用 JavaScript 元素并设置 <ul>像那样的宽度。

Answer 1

应该这样做( see fiddle ；当然，它隐藏了一些因为你的 overflow: hidden 在 div，remove that and you see it is working 上):

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

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

虽然实际上要让 ul 拉伸(stretch)大小 ( it doesn't with just the above code )，它还需要有 display: inline-block ( see fiddle ) 或float 应用 ( see fiddle ) 以使其适应其内容的大小。