Menu di navigazione orizzontale dinamico CSS per riempire la larghezza specifica (comportamento tabella)

Question

Ho bisogno di creare un menu di navigazione orizzontale con un numero variabile di elementi (questo è importante - Non posso hardcodificare le larghezze nel CSS e non voglio calcolarli con JS) che si riempiono di una certa larghezza, diciamo 800px.

Con le tabelle,

<table width="800" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td>One</td> 
    <td>Two</td> 
    <td>Three</td> 
    <td>Four</td> 
    <td>Five Seven</td> 
    </tr> 
</table> 

<style> 
table td { 
     padding: 5px 0; 
     margin: 0; 
     background: #fdd; 
     border: 1px solid #f00; 
     text-align: center; 
    } 
</style> 

Nota che gli oggetti più lunghi occupano più spazio e posso aggiungere elementi nel codice HTML senza cambiare nulla in CSS e le voci di menu ridursi a ospitare elementi aggiuntivi - l'intero menu mai essere più corto o più lungo di 800 px.

Come un menu non è un uso semanticamente corretto di un tavolo, può essere fatto con un elenco e un puro CSS?

Answer 1

In browsers that support the table display regole CSS, sì:

<style> 
    nav {display:table; width:800px; background:yellow} 
    ul {display:table-row; } 
    li {display:table-cell; border:1px solid red} 
</style> 

<nav> 
<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five Seven</li> 
</ul> 
</nav> 

In sostanza, si Dovrei costruire una tabella di token. In azione: http://jsbin.com/urisa4

Altrimenti: no, non se non è possibile compromettere le proprie esigenze.

Answer 2

L'unico modo per fare questo con i CSS è quello di codificare l'width dei li elementi (supponendo che ci si stia utilizzando la seguente struttura):

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five Seven</li> 
    </ul> 

ul { 
    width: 80%; /* or whatever */ 
} 

ul li { 
    width: 16%; 
    padding: 1%; 
} 

JS Fiddle demo.

Questo lascia potenzialmente un 10% inutilizzato (da utilizzare per margin o padding aggiuntivo).

A un certo punto nel futuro css calculations potrebbe essere in grado di eseguire questo più fluido.

Answer 3

Questo funziona, ma Non penso che si desidera alcuni pensano in questo modo :)

<div class="master"> 
    <ul> 
     <li>test1</li> 
     <li>test2</li> 
     <li>aölsdkfaösdlfk</li> 
     <li>yeah baby</li> 
     <li>hi</li> 
    </ul> 
</div> 

.master { 
    width:800px; 
    background-color:black; 
    height:100px; 
    color:white; 
    display:table; 
} 
table { 
width:100%; 
} 

ul { 
display:table-row; 
width:100%; 
} 
li { 
display:table-cell; 
width:auto; 
margin:1px; 
border:1px solid white; 
background-color:red; 
text-align:center; 
    vertical-align:middle; 
} 

http://jsfiddle.net/UnNyS/

Answer 4

Si potrebbe fare qualcosa di simile:

<style type="text/css"> 
#container { width: 800px ; border: 1px dashed #333; } 
#container div { width: inherit; display: table-cell; background: #ccc} 
</style> 

<div id="container"> 
    <div>Something</div> 
    <div>Something</div> 
    <div>Something</div> 
</div> 

In questo modo si riempie ciò che si vuole, ma può crescere fino a un sacco di oggetti.

Spero che questo aiuti.