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 s。

目前我的问题是.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删除内联块元素之间的空白区域。

Answer 2

将display:inline-block添加到您的.item中 display的默认DIV为block，这会导致垂直堆叠，但display:inline-block会使所有DIV自我排列在水平线< / p>

变量显示选项的区别：

内嵌元素：

尊重左派和左派右边距和填充，但不 top＆amp;底
无法设置宽度和高度
允许其他元素左右坐着。

阻止元素：

尊重所有这些
在块元素

内联块元素：

允许其他元素左右坐着
尊重顶级＆amp;底部边距和填充
尊重高度和宽度。

来自Oldskool answer
W3schools

中的更多信息

div inside overflow =“auto”将其宽度自动调整为其内容

2 个答案: