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

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 quiero calcularlos con JS) que llenan hasta cierto ancho, digamos 800px.

Con tablas, enter image description here

One Two Three Four Five Seven
table td { padding: 5px 0; margin: 0; background: #fdd; border: 1px solid #f00; text-align: center; }

Tenga en cuenta que los elementos más largos ocupan más espacio y puedo agregar elementos en el HTML sin cambiar nada en CSS y los elementos del menú se contraen para acomodar elementos adicionales; el menú completo nunca es más corto o más largo que 800 píxeles.

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

En navegadores compatibles con la tabla, se muestran reglas de CSS, sí:

   

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

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

Podrías hacer algo como esto:

  
Something
Something
Something

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

Espero que esto ayude.

La única forma de hacerlo con CSS es codificar el width de los elementos li (suponiendo que usaría la siguiente estructura):

  
  • One
  • Two
  • Three
  • Four
  • Five Seven
ul { width: 80%; /* or whatever */ } ul li { width: 16%; padding: 1%; }

Demostración de JS Fiddle .

Esto deja, potencialmente, un 10% “sin usar” (para ser usado para margin o padding adicional).

En algún momento en el futuro, los cálculos CSS podrían ser capaces de realizar esto de manera más fluida.

Esto funciona, pero no creo que quieras que piensen así 🙂

 
  • test1
  • test2
  • aölsdkfaösdlfk
  • yeah baby
  • hi
.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/