CSS
Układ blokowy

Uzasadniony pasek nawigacji

Poziomo wyrównany pasek nawigacyjny (menu) zawiera pewną liczbę elementów, które należy uzasadnić. Pierwszy (lewy) element nie ma lewego marginesu w kontenerze, ostatni (prawy) element nie ma prawego marginesu w kontenerze. Odległość między elementami jest równa, niezależna od szerokości poszczególnych elementów.

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;
}

Notatki

• Znaczniki nav , ul i li zostały wybrane ze względu na ich semantyczne znaczenie „lista pozycji nawigacji (menu)”. Oczywiście można również użyć innych tagów.
• Pseudoelement :after powoduje dodatkową „linię” na ul a tym samym dodatkową, pustą wysokość tego bloku, popychając inną zawartość w dół. Rozwiązuje to ujemny margin-bottom , który musi mieć taką samą wielkość jak line-height (ale ujemna).
• Jeśli strona stanie się zbyt wąska, aby zmieścić wszystkie elementy, elementy przejdą do nowej linii (zaczynając od prawej) i będą w tym wierszu uzasadnione. Całkowita wysokość menu będzie rosła w miarę potrzeb.