Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/02/2008, 04:46
Avatar de qwerty_wq
qwerty_wq
 
Fecha de Ingreso: enero-2005
Mensajes: 109
Antigüedad: 19 años, 3 meses
Puntos: 1
Justificar elementos de una lista 'inline'

Buenas, a ver si podéis ayudarme... Resulta que tengo un menú horizontal en la parte superior de mi web realizado con una lista <ul> y con un estilo "inline", de forma que los elementos quedan en la misma línea. Ahora bien, el problema surge cuando quiero que dicha lista ocupe todo lo ancho de la página (en este caso, son 950px) y que los elementos se distribuyan automáticamente de forma regular. Es decir, que el primer elemento quede en el borde izquierdo, el último en el borde derecho, y los elementos intermedios queden distribuídos de forma equidistante.

He probado a ponerle una alineación "justify" al elemento <ul>, a cambiar la lista por un elemento <div> y cada opción del menú por elementos <span> para alinear el texto y nada. Intuyo cuál podría ser la solución, sustituirlo todo por una tabla, pero de esta forma se pierde el carácter semántico, ya que no se justifica el uso de tablas en un menú por el significado del propio contenido. O quizás incluso ni siquiera la tabla sea una solución.

¿Hay alguna solución? ¿Cómo tengo que configurar los estilos para hacer lo que quiero, o al menos hacerlo de forma aproximada?

Es que resulta que si pongo anchuras y márgenes fijos, cada navegador lo interpreta de una forma distinta, así que la posible solución de alinearlo centrado y ajustar el ancho del menú al ancho de la página no la veo posible. Por ejemplo, Firefox en Linux me da el ancho correcto, pero en Mac OS X y en Windows se queda corto. Y bueno, si ya metemos a Safari, Opera e Internet Explorer, desde quedarse demasiado estrecho hasta superar la línea y desmontar todo el diseño hay todas las posibilidades que os imaginéis.

Muchas gracias por adelantado.