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,滚动框最终会有一个垂直滚动条,而.items最终会垂直堆叠.我给出.container一个固定的高度,但是.items堆栈垂直超出这个固定的高度.

我想要.container没有固定的宽度,所以它可以采取任何数量的项目.我希望滚动条是水平的,我也希望.items水平堆叠.

我的问题:

我应用什么CSS .container来.item水平堆栈？

Answer 1

通过使用float属性,元素将从文档正常流中删除.

您可以更改其显示类型以inline-block使其保持内联流,并使用white-space: nowrap;container(.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;
}

工作演示.

注意:您可以参考我的答案来删除内联块元素之间的空白区域.