Menú de navegación horizontal dinámico CSS para rellenar el ancho específico (comportamiento de la tabla)

Question

Necesito crear un menú de navegación horizontal con un número variable de elementos (esto es importante, no puedo codificar anchos en el CSS y no no desea calcularlos con JS) que llenen hasta cierto ancho, digamos 800px.

con mesas,

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

cuenta que los artículos más largos ocupan más espacio y que pueden añadir elementos en el código HTML sin cambiar nada en CSS y los elementos de menú reducir el tamaño para acomodar elementos adicionales - todo el menú nunca siendo más corto o más largo que 800px.

Como un menú no es un uso semántico correcto de una tabla, ¿se puede hacer esto con una lista y CSS puro?

Answer 1

En browsers that support the table display reglas 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> 

Básicamente, Tendría que construir una tabla de tokens. En acción: http://jsbin.com/urisa4

De lo contrario: no, no si no puede comprometer sus requisitos.

Answer 2

La única manera de hacer esto con CSS es difícil que el código del width de los elementos li (suponiendo que estaría utilizando la siguiente estructura):

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

Esto deja, potencialmente, un 'no utilizado' 10% (que se utilizará para margin o adicional padding).

En algún punto en el futuro css calculations podría realizar esto más fluidamente.

Answer 3

Esto funciona, pero yo no lo creo desea algunos piensan como esto :)

<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

se podría hacer algo como esto:

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

De esta manera se llena lo que quiere, pero puede crecer a una gran cantidad de artículos.

Espero que esto ayude.