Выравниваем элементы по ширине с помощью text-align: justify

выравниваем элементы с помощь text-align:justify

В этом посте хотел бы поделиться с вами простым хаком, который сэкономит время при верстке горизонтального меню или, например, навигации. Когда придется что-то менять в сверстанном сайте, а заказчик скорее всего захочет изменения в дальнейшем, то блок с элементами не поедет и при добавлении новых элементов вам не придется рассчитывать отступы и ширину элементов, а если их  в меню станет больше, то можно будет просто уменьшить шрифт. Даже при добавлении адаптивности блок с элементами будет смотреться прилично.

Без имени-1

Чтобы выровнять наши элементы на всю ширину вне зависимости от их длины и без указания отступов c условием, что они будут занимать расстояние от края до края блока, нам понадобится известное свойство  text-align: justify. Оно выравнивает элементы по ширине, но это работает только в многострочном контейнере. Сэмулируем такое поведение при помощи псевдоэлемента :after для создания второй пустой строки .

 HTML

 

CSS