css - 水平放置 div 元素，而不是垂直放置

Question

我正在设计一个导航栏；其中的选项卡链接由 CSS 形状制作。为此，我在子元素上使用了很多 position: absolute，并将父容器设置为 position: relative。我还为他们设置了一个硬高度和足够的宽度，但它不起作用。即使使用 overflow: .. 也不行。无论如何，我的选项卡框都是垂直放置的。

我现在还没有头绪。

“navBox”类 div 中的 div 具有 position: absolute。

点击here (jsfiddle)用于 HTML 和 CSS 代码，并观察输出结果。

提前致谢

Answer 1

您需要您的.navBox 类来display: inline-block。自然地，div 元素被设置为显示 block ，默认情况下该元素的宽度为 100%。此外，您的列表项要 float: left 因为默认情况下列表是垂直显示的，向左浮动允许您水平显示列表

更新了 jsFiddle:http://jsfiddle.net/qLKg7/4/