與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的菜單列

回答

相關問題