html - Div inside overflow ="auto"自动根据内容调整宽度

Question

这是我的 HTML:

<div class="scrollingBox">
    <div class="container">
         <div class="item">Item</div>
         <div class="item">Item</div>
         <div class="item">Item</div>
         <div class="item">Item</div>
    </div>
</div

这是我的 CSS:

.scrollingBox {
    height:100px;
    width:300px;
    overflow:auto;
}
.item {
    float:left;
    height:60px;
    margin:5px;
    width:100px;
}

.container 可以包含任意数量的.item。

我目前的问题是 .container 永远不会比 .scrollingBox 更宽，滚动框以垂直滚动条结束，而 .item 最终垂直堆叠。我给 .container 一个固定的高度，但是 .item 的垂直堆叠超出了这个固定高度。

我希望 .container 没有固定宽度，因此它可以容纳任意数量的元素。我希望滚动条是水平的，我还希望 .item 水平堆叠。

我的问题:

我将什么 CSS 应用到 .container 以使 .item 水平堆叠？

Answer 1

通过使用float 属性，元素从文档正常流中移除。

您可以将它们的显示类型更改为 inline-block 以保持它们处于内联流中，并使用 white-space: nowrap;为容器 (.scrollingBox) 保持行内元素彼此相邻，如下所示

给你:

.scrollingBox {
    height:100px;
    width:300px;
    overflow:auto;
    white-space: nowrap;    /* Suppress line breaks */
}
.item {
    display: inline-block;  /* Display the items as inline-block            */
    vertical-align: top;    /* Align the inline items vertically at the top */
    height:60px;
    width:100px;
}

WORKING DEMO .

注意:可以引用my answer删除行内 block 元素之间的空白。