Menú ajustable al número de opciones.

[ztikma]

Hola estimados,

Tantas lunas. Vuelvo por estas tierras para hacerles una consulta:

Resulta que tengo un menú hecho en listas con el módulo Maximenú de joomla el cual necesito que se ajuste al ancho de la página de acuerdo a las opciones que el administrador le vaya agregando o quitando. La estructura es muy similar a esta:

Código:

<ul>
<li><a><span>home</span></a></li>
<li><a><span>opcion 01</span></a></li>
<li><a><span><opcion 02></span></a></li>
</ul>

Cada vez que el administrador edita el numero de opciones debo ajustar el padding de los estilos del li para que se adapte al ancho, pero necesito que eso quede automático para que siempre se esté autoajustando con css.
Intenté jugar con el width y el display, pero no me resulta.
¿Alguna idea?

Aquí el link donde se encuentra el menú:
http://www.muniolivar.cl/

Saludos

[pzin]

Podrías intentar usar display: table-cell para imitar el comportamiento de una tabla:

Código CSS:

ul {
  display: table;
}
 
li {
  display: table-cell;
}
 

[ztikma]

Hola Pzin,

Gracias por tu respuesta.
Lamentablemente no obtuve el resultado esperado.

Saludos

[webosiris]

con javascript lo puedes hacer bien fácil, aquí un ejemplo usando jQuery: http://www.tympanus.net/Tutorials/ResizingMenu/

[pzin]

Iniciado por ztikma

Lamentablemente no obtuve el resultado esperado.

Entonces hiciste algo mal o lo explicaste mal. Aunque yo creo que lo explicaste bien.

¿No es esto? Nótese que son dos listas, para ver que funciona:



Que es básicamente:

Código CSS:

ul {
  display: table;
  width: 100%;
}
 
li {
  display: table-cell;
  text-align: center;
}