Html 水平定位 div 元素，而不是垂直
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13935444/
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
Positioning div elements horizontally, not vertically
提问by gorn
Im designing a navigation bar; and tab links in it are made by CSS shapes. For this I use alot of position: absoluteon child elements, and I have parent containers set to position: relative. I also set a hard height and plenty width for them, and it will not work. Not even with using overflow: ... My tab boxes positions vertically no matter what.
我正在设计一个导航栏；和其中的选项卡链接由 CSS 形状组成。为此，我position: absolute在子元素上使用了很多，并且将父容器设置为position: relative. 我还为它们设置了严格的高度和足够的宽度，但它不起作用。即使使用overflow: ... 无论如何，我的选项卡框都是垂直放置的。
I have no clue at this point.
在这一点上我没有任何线索。
Divs inside "navBox" class div have position: absolute.
“navBox”类 div 中的 Div 具有position: absolute.
Click here (jsfiddle)for HTML and CSS code, and watch output results.
单击此处 (jsfiddle)获取 HTML 和 CSS 代码，并观察输出结果。
Thanks in advance
提前致谢
回答by Eric Goncalves
You need your .navBoxclass to display: inline-block. Naturally the divelement is set to display block which gives the element by default a width of 100%. Also, your list items to float: leftbecause by default a list is displayed vertically, floating left allows you to display the list horizontal
你需要你的.navBox班级display: inline-block。自然地，div元素被设置为显示块，默认情况下为元素提供 100% 的宽度。此外，您的列表项float: left因为默认情况下垂直显示列表，向左浮动允许您水平显示列表
updated jsFiddle: http://jsfiddle.net/qLKg7/4/
更新 jsFiddle：http: //jsfiddle.net/qLKg7/4/
回答by ATOzTOA
CSS: display: inlineor display:inline-block.
CSS:display: inline或display:inline-block.
