将 overflow="auto" 的 div 内容自适应其宽度以匹配其内容

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水平堆叠。

我的问题是：

我应该对.container应用什么CSS来使.item水平堆叠？

- Jimmery

---

“.tems应该浮动在一起，直到达到.scrollingBox的末尾，因此基本上在它们断开之前应该有3个项目并排。您希望每个项目都在一行中，并且只要有超过3个项目，滚动框就具有水平滚动条吗？” - Nico O

@NicoO 差不多是这样 - Jimmery

然后你在下面找到了答案。祝你好运。 - Nico O

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;
}

演示链接。

注意：您可以参考我的回答，以删除内联块之间的空白。

- Hashem Qolami

Answer 2

将display:inline-block添加到您的.item
DIV的默认display是block，这会导致垂直堆叠，但是display:inline-block使所有DIV在水平线上排列。

不同显示选项的差异：

内联元素：

• 保留左右边距和填充，但不保留上下边距
• 无法设置宽度和高度
• 允许其他元素位于其左侧和右侧。

块级元素：

• 保留所有这些
• 强制块元素后换行

内联块级元素：

• 允许其他元素位于其左侧和右侧
• 保留上下边距和填充
• 保留高度和宽度。

源自Oldskool answer
更多信息请查看W3schools

- frogatto