NAV CSS multi-fila

Question

Sto creando un switcher del pannello di contenuto, con 6 elementi NAV su 2 righe. Quindi 3 elementi su ogni riga. In tutto, 6 elementi, 2 righe, 3 colonne, con ogni colonna allineata in modo uniforme. Come posso crearlo con la quantità minima di HTML. Sono sicuro che potrei farlo, ma non voglio aggiungere un mucchio di div e spazzatura. Aiuto? :)

Answer 1

Il codice HTML sarebbe simile a questo

  <div id="nav"> 
    <ul> 
        <li>data</li> 
        <li>data</li> 
    </ul> 
    <ul> 
        <li>more data<li> 
        <li>more data</li> 
    </ul> 
    <ul>
        <li>even more data<li> 
        <li>even more data</li> 
    </ul>

</div> 

E il CSS sarebbe

ul { 
    float: left; 
    list-style: none;
} 

La mia risposta è simile a Ggregoire, tranne per aver chiesto 3 articoli in 2 file. Non sono in grado di pubblicare commenti, quindi ho dovuto scrivere una nuova risposta.

Answer 2

Html:

<div id="navtabs">
    <ul>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
    </ul>
    <ul id="right">
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
    </ul>
</div>

CSS:

ul {
    float: left;
}

#right {
    margin-left: 10px;
}

Esempio: http://jsfiddle.net/ddysk/

Answer 3

L'uso di elenchi non ordinati in stile è la scelta migliore. Sono semantici per natura, quindi sono SEO e leggi da schermo.

Se è un menu orizzontale, usa Li {float:left}, altrimenti stile solo i tag A nell'elenco, non il LIS per i migliori risultati.

Menu semplice:

<ul>
   <li><a href="">item A</a></li>
   <li><a href="">item B</a></li>
</ul>

Menu a più livelli.

.menu {
  ul li { position:relative; float:left }
  ul li a { display:block; ... your styles ...}
  ul li ul {position:absolute ..position as needed ...}
  ul li ul li {float:none}
}

<div class='menu'>
<ul>
   <li><a href="">item A</a>
      <ul>
        <li><a href="">item A-1</a></li>
        <li><a href="">item A-2</a></li>
     </ul>     
   </li>
   <li><a href="">item B</a></li>
</ul>
</div>

È meglio usarlo con un reset CSS: http://developer.yahoo.com/yui/reset/