CSS
Макет встроенного блока

Обоснованная панель навигации

В горизонтально-ориентированной навигационной панели (меню) есть несколько элементов, которые должны быть оправданы. Первый (левый) элемент не имеет левого поля в контейнере, последний (правый) элемент не имеет правого края в контейнере. Расстояние между элементами равно, независимо от ширины отдельного элемента.

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

Заметки

• nav , ul и li были выбраны для их семантического значения «список элементов навигации (меню)». Разумеется, можно использовать и другие теги.
• Псевдоэлемент :after псевдоэлемента вызывает дополнительную «линию» в ul и, следовательно, дополнительную, пустую высоту этого блока, нажатие другого содержимого вниз. Это решается отрицательным margin-bottom , которое должно иметь ту же величину, что и line-height (но отрицательная).
• Если страница становится слишком узкой для всех элементов, которые подходят, элементы будут разбиты на новую строку (начиная с правой) и будут оправданы в этой строке. Общая высота меню будет расти по мере необходимости.