Aquí va otro truco de CSS con el cual conseguiremos distribuir uniformemente un menú de forma horizontal.
A continuación os muestro como se hace, tanto el HTML como el CSS necesarios.
HTML del menú
En mi caso, el HTML del menú, como es común, consta de una lista, en la que cada elemento es un item del menú. Aquí esta el código:
1 2 3 4 5 6 7 |
<ul id="menu-principal"> <li><a href="">Elemento 1</a></li> <li><a href="">Elemento 2</a></li> <li><a href="">Elemento 3</a></li> <li><a href="">Elemento 4</a></li> <li><a href="">Elemento 5</a></li> </ul> |
Como vemos, es un menú normal y corriente, como los que muchos habremos usado en nuestras webs.
CSS del menú
En primer lugar intente hacerlo haciendo que los distintos <li> flotasen para realizar el efecto, y no llegaba a ser el deseado. Pase a dar a cada <li> un display: inline-block; y poco a poco a jugar con las distintas alineaciones del texto del ul.
Usando texto justificado, se consigue este efecto deseado, la linea ocupa desde el principio hasta el final del contenedor. Aquí el código CSS
1 2 3 4 5 6 7 8 9 10 11 |
ul{ list-style: none; margin: 0; padding: 0; width: 100%; text-align: justify; } ul li{ display: inline-block; } |
Sin embargo, la ultima linea no queda justificada, por lo que para un menú que es de una sola linea esto no nos sirve, o al menos no por si solo. Para que solo una linea quede justificada, debemos añadir detrás algún elemento que haga que el navegador interprete que hay más lineas después.
Así que por CSS, hemos añadido despues del <ul> un elemento invisible que ocupa el 100% del ancho, con lo que conseguimos «engañar» al navegador. Aquí el CSS que añade el elemento:
1 2 3 4 5 6 7 |
ul:after{ content: "."; display: inline-block; width: 100%; height: 0; visibility: hidden; } |
Con lo que el código CSS completo sería el siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ul{ list-style: none; margin: 0; padding: 0; width: 100%; text-align: justify; } ul:after{ content: "."; display: inline-block; width: 100%; height: 0; visibility: hidden; } ul li{ display: inline-block; } |
Como vemos, no es difícil conseguir que una sola linea quede justificada, lo cual en este caso hemos usado para alinear un menú, aunque puede ser usado en cualquier situación que queramos que una sola linea de texto ocupe todo el ancho de su contenedor.
Funiona muy bien. Gracias.
o en un div, o en span
En efecto funciona muy bien, pero si quiero hacer que el ancho del li también crezca proporcionalmente?
En este caso cada li ocupa exactamente el tamaño del texto que contiene, ya que se busca que el menú quede solo con el texto, que no sea tipo botonera.
El efecto que se busca es que la primera palabra del menú y la última queden alineadas en dos posiciones concretas, dejando el espaciado de las palabras de los distintos items del menú «normal» de forma que se amplia el espacio que hay entre los li, pero no el espacio de las palabras del texto de cada li.
Si asignásemos distintos anchos a cada li el efecto que se conseguiría no sería el mismo. No se conseguiría que la primera palabra y la última quedasen donde queremos, y en caso de conseguirlo, la distribución de los elementos del menú no sería uniforme.
Un saludo!
te juro q hace años ves esta publicacion como referencia para cada vez q necesito hacer algo como lo que explicas. nuk borres este post!! muchas muchas gracias
Me alegro que te guste el post.
Un saludo!
Muito legal, funciona perfeitamente (Brazil).
Muchas gracias por el comentario me alegro de que te haya resultado útil.
Un saludo!
Hola!! Me ha ido muy bien esto… pero tengo una duda.
Estoy con un menú igual que este, pero que el a:hover cambie de color, y cuando pasa por encima no abarca todo el tamaño de la «celda» por así decirlo.
tengo esto por ej:
HOME | GAMA AUTOS | CONTACTANOS | RESERVAS
Cuando pasa por encima se cambia todo el fondo a amarillo. He puesto que «|» sea un borde derecho amarillo también, el fondo amarillo del «a:hover» me llega hasta el borde-derecho, pero no me llega hasta la parte izquierda… entonces deja un espacio que queda muy feo, entre «| (espacio enorme en blanco) GAMA AUTOS |».
¿Solo lo puedo solucionar poniendo ancho fijo? 🙁 es que como hay varios idiomas en cada uno la palabra tiene más o menos caracteres.
Gracias!!
Si pones a los enlaces un display block, estos deberían ocupar todo el ancho del li, si no lo hacen prueba con un width: 100%
Si tienes disponible tu código para verlo en vivo podría echar un vistazo y ver como solucionarlo mejor.
Un saludo!