题
我正在尝试使用混合垂直的水平项目创建菜单。这就是菜单应该如下所示:
项目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
解决方案
保持浮动左侧的奇数元素。
使偶数元素没有宽度(边缘右:-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;
}
.
其他提示
您可以做的是将菜单项设置为
width:25%;
.
在每个菜单项上,然后刚刚浮动它们。你可以摆脱其他一切。另外,由于不使用菜单标记,它已被弃用。:)
jsfiddle
更新的小提琴
也许这样的东西?这有点生锈,但它是我适合你想要的。
我添加了一些并改变了一点
.navigation menu li:nth-child(6) {
float: none;
}
.
不隶属于 StackOverflow