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来说太过分了：）

有人有个主意吗？在此先感谢您的帮助！

Greetings Est Ro

Answer 1

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

width:25%;

在每个菜单项上，然后向左浮动它们。你可以摆脱其他一切。另外作为一方不使用菜单标签是不推荐使用。：）

<强>的jsfiddle

http://jsfiddle.net/eERR7/

更新后的内容

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

Answer 2

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

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

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

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

Answer 3

保持奇数元素向左浮动。

使偶数元素没有宽度（边距右：-115px）并将它们放置在左侧155像素和底部的距离：

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

使用<menu> <li> </li> </menu>混合水平垂直css

3 个答案: