html – div溢出=“自动”自动调整其宽度为其内容

概述这是我的 HTML： <div class="scrollingBox"> <div class="container"> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class= 这是我的 HTML：

<div >    <div >         <div >Item</div>         <div >Item</div>         <div >Item</div>         <div >Item</div>    </div></div

这是我的CSS：

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

.container可以包含任意数量的.items.

我现在的问题是.container永远不会比.scrollingBox更宽,滚动框最终会有一个垂直滚动条,而.items最终会垂直堆叠.我给.container一个固定的高度,但.items垂直叠加超过这个固定的高度.

我希望.container没有固定宽度,因此可以使用任意数量的项目.我希望滚动条是水平的,我也希望.items水平堆叠.

我的问题：

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

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

您可以将其显示类型更改为内联块,也可以将它们保留为内联流,并使用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以删除内联块元素之间的空白区域.

总结

以上是内存溢出为你收集整理的html – div溢出=“自动”自动调整其宽度为其内容全部内容，希望文章能够帮你解决html – div溢出=“自动”自动调整其宽度为其内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。