将div元素水平定位而非垂直定位

Question

我正在设计一个导航栏，并且使用CSS形状来创建选项卡链接。为此，我在子元素上使用了大量的position: absolute，并将父容器设置为position: relative。我还为它们设置了硬高度和足够的宽度，但是它不起作用。甚至使用overflow: ..也没用。我的选项卡框无论如何都会垂直定位。

我现在一点头绪也没有。

"navBox"类别div内部的div具有position: absolute属性。

点击这里(jsfiddle)查看HTML和CSS代码，并观看输出结果。

提前致谢。

- gorn

---

你能在jsfiddle.net上建立一个fiddle吗？ - defau1t

你是否在使用 float:left; 或 display:inline-block;，需要展示一些 CSS？ - defau1t

在这里发布了代码和结果 http://jsfiddle.net/qLKg7/1/ - gorn

Answer 1

您需要将您的 .navBox 类设置为 display: inline-block。自然而然的，div 元素默认的显示属性是块级元素，它会占据父元素的全部宽度。此外，您的列表项应该设置为 float: left，因为默认情况下列表是垂直显示的，浮动到左侧可以将列表水平显示。

更新后的jsFiddle链接： http://jsfiddle.net/qLKg7/4/

- Eric Goncalves

Answer 2

CSS： display:inline 或者 display:inline-block。

- ATOzTOA