我需要将元素堆叠到一个网格/列结构中，其中 1 在 2 以上，3 在 4 以上，等等。有没有更好的方法可以在不使用 javascript 的情况下仍然使用无序列表来实现这一点？我所拥有的正在发挥作用，但这似乎是一种糟糕的实现方式。
<style type="text/css">
#nav{
height:63px;
width:100%;
position:relative;
}
ul.topnav {
margin:0 0;
padding:0 0;
list-style:none;
font-size:14px;
}
ul.topnav li {
width:180px;
height:30px;
margin:1px 0 0;
background-color:#666;
position: absolute;
left:0; top:0;
}
ul.topnav li.navTopPos{ top:32px; }
ul.topnav li.navLeftPos1{ left:180px; }
ul.topnav li.navLeftPos2{ left:360px; }
ul.topnav li.navLeftPos3{ left:540px; }
</style>
</head>
<body>
<div id="nav">
<ul class="topnav">
<li>ONE</li>
<li class="navTopPos">TWO</li>
<li class="navLeftPos1">THREE</li>
<li class="navLeftPos1 navTopPos">FOUR</li>
<li class="navLeftPos2">FIVE</li>
<li class="navLeftPos2 navTopPos">SIX</li>
<li class="navLeftPos3">SEVEN</li>
<li class="navLeftPos3 navTopPos">EIGHT</li>
</ul>
</div>
</body>
最佳答案
这样做行吗:Working fiddle
<style type="text/css">
#nav{
height:63px;
width:100%;
}
ul.topnav {
margin:0 0;
padding:0 0;
list-style:none;
font-size:14px;
}
ul.topnav li {
width:180px;
height:30px;
margin:1px 0 0;
background-color:#666;
float:left
}
</style>
</head>
<body>
<div id="nav">
<ul class="topnav">
<li>ONE</li>
<li>THREE</li>
<li>FIVE</li>
<li>SEVEN</li>
</ul>
<ul class="topnav">
<li>TWO</li>
<li>FOUR</li>
<li>SIX</li>
<li>EIGHT</li>
</ul>
</div>
</body>
关于css - 带有 CSS 的菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11255274/