Столбцы меню с 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

Спасибо за вашу помощь/идеи, но я нашел решение по ссылке, размещенной выше. –

Столбцы меню с CSS

ответ

Смежные вопросы