Html 如何在没有换行的情况下并排排列许多 <div> 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10269290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to arrange many <div> elements side by side with no wrap
提问by Reza Owliaei
There are three div elements side by side in a container div, with smaller width than children total width. Hereyou can find the Fiddle of the case:
在一个容器 div 中并排存在三个 div 元素，宽度小于子元素的总宽度。在这里你可以找到案例的小提琴：
I want to make container div scroll horizontally in order to show other children.
我想让容器 div 水平滚动以显示其他孩子。
How can I arrange children not to wrap inside container div? It scroll vertically now, I want it to scroll horizontally.
如何安排孩子不要包裹在容器div内？它现在垂直滚动，我希望它水平滚动。
回答by Niet the Dark Absol
Change float: leftto display: inline-block;and add white-space: nowrapto the container.
更改float: left到display: inline-block;并添加white-space: nowrap到容器中。
回答by Josh Davenport
You need a another divwithin the scrolling divthat has a total width equal to all of the widths of it's children.
您需要div滚动div中的另一个总宽度等于其子项的所有宽度。
See: http://jsfiddle.net/joshdavenport/SasDh/2/
见：http: //jsfiddle.net/joshdavenport/SasDh/2/
There was already an extra divthere so I used that one
那里已经有一个额外的div所以我用了那个
Bonus: To get rid of the vertical scroll bar use overflow-y: hidden. See: http://jsfiddle.net/joshdavenport/SasDh/3/
奖励：要摆脱垂直滚动条，请使用overflow-y: hidden. 见：http: //jsfiddle.net/joshdavenport/SasDh/3/
