使用 混合水平垂直CSS

Question

我正在尝试使用混合垂直的水平项目创建菜单。这就是菜单应该如下所示：

项目1项目3项5项7
第2项4项6项8

我尝试了什么是以下HTML：

<menu>  
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
</menu>

.

和css：

.navigation menu {
    float: right;
    margin-top:103px;
    width:683px;    
}
.navigation menu li {
    display:block;
    width: 115px;
    float: none;
    background-image:none;
    text-align:right;
}
.navigation menu li:nth-child(3) {
    float: left;
}
.navigation menu li:nth-child(4) {
    float: none;
}
.navigation menu li:nth-child(5) {
    float: left;
}
.navigation menu li:nth-child(6) {
    float: none;
}

.

但它不起作用，我认为，这对于CSS来说太多了:)

任何人都有一个想法？提前感谢任何帮助！

问候Est Ro

Answer 1

保持浮动左侧的奇数元素。

使偶数元素没有宽度（边缘右：-115px），并将155 px定位在左侧和aproopate距离到底：

css

.menu {
    float: left;
    margin-top:13px;
    width:683px;    
}
.menu li {
    display:block;
    width: 115px;
    float: left;
    background-image:none;
    text-align:right;
}

.menu li:nth-child(even) {
    position: relative;
    top: 1.2em;
    left: -115px;
    margin-right: -115px;
}

.

fiddle

Answer 2

您可以做的是将菜单项设置为

width:25%;

.

在每个菜单项上，然后刚刚浮动它们。你可以摆脱其他一切。另外，由于不使用菜单标记，它已被弃用。:)

jsfiddle

http://jsfiddle.net/eerr7/

更新的小提琴

http://jsfiddle.net/eerr7/2/

Answer 3

也许这样的东西？这有点生锈，但它是我适合你想要的。

我添加了一些并改变了一点

.navigation menu li:nth-child(6) {
    float: none;
}

.

http://jsfiddle.net/jxxu8/2/