CSS
Disposición de bloques en línea

Barra de navegación justificada

La barra de navegación (menú) justificada horizontalmente tiene una cantidad de elementos que deben estar justificados. El primer elemento (izquierdo) no tiene margen izquierdo dentro del contenedor, el último elemento (derecho) no tiene margen derecho dentro del contenedor. La distancia entre los elementos es igual, independiente del ancho del elemento individual.

HTML

<nav>
    <ul>
        <li>abc</li>
        <li>abcdefghijkl</li>
        <li>abcdef</li>
    </ul>
</nav>

CSS

nav {
    width: 100%;
    line-height: 1.4em;
}
ul {
    list-style: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: justify;
    margin-bottom: -1.4em;
}
ul:after {
    content: "";
    display: inline-block;
    width: 100%;
}
li {
    display: inline-block;
}

Notas

• Las etiquetas nav , ul y li fueron elegidas por su significado semántico de 'una lista de elementos de navegación (menú)'. Por supuesto, también se pueden usar otras etiquetas.
• El :after pseudo-elemento causa una 'línea' extra en la ul y, por lo tanto, una altura extra y vacía de este bloque, empujando el contenido hacia abajo. Esto se resuelve con el margin-bottom negativo, que debe tener la misma magnitud que la line-height (pero negativo).
• Si la página se vuelve demasiado estrecha para que quepan todos los elementos, los elementos se separarán en una nueva línea (comenzando desde la derecha) y se justificarán en esta línea. La altura total del menú crecerá según sea necesario.