混合水平和垂直 css 与<menu><li>

Question

我正在尝试创建一个混合垂直和水平项目的菜单。菜单应该是这样的：

项目1 nbsp；第3项 nbsp；第5项 nbsp；项目7
项目2 nbsp；第4项 nbsp；第6项 nbsp；项目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

您可以将菜单项设置为

width:25%;

在每个菜单项上，然后将它们向左浮动。你可以摆脱其他一切。此外，由于一方不使用菜单标记，因此它已被弃用。：）

JSFIDDLE

http://jsfiddle.net/eERR7/

更新的FIDDLE

http://jsfiddle.net/eERR7/2/

Answer 2

保持奇数元素向左浮动。

使偶数元素没有宽度（右边空白：-115px），并将它们向左放置155 px，并将适当的距离放在底部：

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;
}

小提琴

Answer 3

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

我添加了一些，并更改了一些

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

http://jsfiddle.net/JXxU8/2/