Menú horizontal CSS: ¿igualmente espaciado?

Question

Tengo un menú CSS estándar, hecho con etiquetas UL y LI. Necesito que cubran toda la página, horizontalmente (no es mi caso real, pero tomaré esto para simplificar la situación). Sin embargo, los elementos se crean dinámicamente y, por lo tanto, no puedo codificar ninguno con elementos LI ni márgenes.

He visto soluciones que usan JavaScript para establecer esos valores, pero me encantaría evitarlos.

Por último, he visto una solución bastante buena que está configurando

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

Esto creará el comportamiento deseado en la mayoría de los navegadores ... excepto en IE.

¿Alguna idea?

EDITAR: Gracias por las respuestas. Sin embargo, como el código que genera los elementos no es mío, no puedo establecer estilos en línea al crearlos sin usar JavaScript más adelante.

Answer 1

No puede establecer el alto o el ancho de un elemento en línea. http://www.w3.org/TR/CSS2/visudet.html # ancho en línea

Prueba display:inline-block;

aquí está la solución para, por ejemplo:

display:inline-block;
zoom:1;
*display:inline;

Answer 2

Si desea dejar que el elemento obtenga todo el espacio disponible, no es necesario definir a priori el ancho de los elementos del menú (por supuesto, ayudará a dimensionar igualmente los elementos li ) Puede resolver este problema trabajando en la propiedad display.

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

Tenga en cuenta que width:1% es obligatorio para evitar el colapso celular.

Answer 3

Si sus elementos de menú se generan dinámicamente (por lo que no sabe cuántos habrá antes), puede agregar un atributo style="width:xx" a los li s (o en <style> en la parte superior. .. o donde quieras, de verdad). Donde xx debería ser width_of_parent_div_in_px/number_of_elements+'px' o 100/number_of_elements+'%'. Los block s también deben ser float - elementos de nivel, y left ed <=>.

Answer 4

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

El ancho: 18% puede ser más o menos correcto si tiene 5 elementos de ancho, teniendo en cuenta el borde y el relleno. Pero variará según la cantidad de elementos que tenga, la cantidad de relleno, etc.

Answer 5

Si está abierto a usar Flexbox, entonces no es difícil de hacer. El crédito completo por el código que estoy a punto de publicar va a Trucos de CSS ya que este es su CSS.

A continuación se muestra un ejemplo que incluye prefijos de proveedor.

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }

<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

El único problema con Flexbox es si necesita admitir IE 9 y versiones posteriores, de lo contrario, no veo ninguna razón para no usar Flexbox. Puede ver la compatibilidad del navegador para Flexbox aquí .

Answer 6

Esto es lo que funcionó para mí:

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}