如何在不换行的情况下并排排列许多 <div> 元素 [重复]答案

【问题标题】：How to arrange many <div> elements side by side with no wrap [duplicate]如何在不换行的情况下并排排列许多 <div> 元素 [重复]
【发布时间】：2012-04-22 15:34:34
【问题描述】：

一个容器 div 中有三个并排的 div 元素，宽度小于子元素的总和宽度。 Here你可以找到本案的Fiddle：

我想让容器 div 水平滚动以显示其他孩子。

如何安排孩子不要包裹在容器 div 中？它现在垂直滚动，我希望它水平滚动。

【问题讨论】：

标签： html css css-float

【解决方案1】：

将float: left 更改为display: inline-block; 并将white-space: nowrap 添加到容器中。

【讨论】：

注意标记中不要有空格:)。 jsFiddle Demo 这个解决方案。
注意：此解决方案不适用于实际包含内容的 div：jsfiddle.net/Jnz7e
@Jason 将 vertical-align:top 添加到块中。
如果你在 body 的其他地方有很多 div 而不是在没有 float:left 的情况下尝试这个。
@1.21gigawatts 它影响所有后代。如果您只需要第一级（直接子级），请使用> 选择器。 Suggested reading: CSS selectors

【解决方案2】：

在滚动的div 中需要另一个div，其总宽度等于其子项的所有宽度。

见：http://jsfiddle.net/joshdavenport/SasDh/2/

那里已经有一个额外的div，所以我用了那个

奖励：要摆脱垂直滚动条，请使用overflow-y: hidden。见：http://jsfiddle.net/joshdavenport/SasDh/3/

【讨论】：

内部 div.width 未知，子 div 正在动态添加。

【解决方案3】：

<span> 标签用于对文档中的内联元素进行分组。
(source)

【讨论】：