与CSS的菜单列

我需要将元素堆叠到1以上2，3以上4等的网格/列结构。有没有更好的方式来实现这一点，而不使用JavaScript，仍然使用无序列表？我拥有的是工作，但这似乎是一个如此糟糕的方式来实现这一目标。与CSS的菜单列

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

来源

2012-06-29 Richard Hartle

一篇旧文，但CSS3预选项你一把：http://www.alistapart.com/articles/multicolumnlists/ – jackwanders

我觉得有些这些解决方案将使我得到我需要完成的东西。感谢参考。 –

这是否会做：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>

来源

2012-06-29 02:50:51 xan

你可以只打破它到列表中的块。

<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 { 
     height:30px; 
     margin:1px 0 0; 
     background-color:#666; 
     position: absolute; 
     left:0; top:0; 
    } 
</style> 

</head> 
<body> 

<div id="nav"> 
    <ul class="topnav"> 
     <div style="display:inline-block; width: 180px;"> 
      <li>ONE</li> 
      <li>TWO</li> 
     </div> 
     <div style="display:inline-block; width: 180px;"> 
      <li>THREE</li> 
      <li>FOUR</li> 
     </div> 
     <div style="display:inline-block; width: 180px;"> 
      <li>FIVE</li> 
      <li>SIX</li> 
     </div> 
     <div style="display:inline-block; width: 180px;"> 
      <li>SEVEN</li> 
      <li>EIGHT</li> 
     </div> 
    </ul> 
</div> 
</body>

工作例子是在这里： http://jsfiddle.net/cDeeP/

来源

2012-06-29 03:27:53 Chad

感谢您的帮助/想法，但我发现上面贴出的jackwanders的链接解决方案。 –

与CSS的菜单列

回答

相关问题