Aquí va otro truco de CSS con el cual conseguiremos distribuir uniformemente un menú de forma horizontal.

En mi caso, el menú constaba de 5 elementos, alguno de ellos compuesto por 2 palabras. El primer elemento debía empezar en una posición concreta, y el ultimo tenía que acabar a X pixels del borde derecho del contenedor.

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:

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

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:

Con lo que el código CSS completo sería el siguiente:

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.