В этом посте хотел бы поделиться с вами простым хаком, который сэкономит время при верстке горизонтального меню или, например, навигации. Когда придется что-то менять в сверстанном сайте, а заказчик скорее всего захочет изменения в дальнейшем, то блок с элементами не поедет и при добавлении новых элементов вам не придется рассчитывать отступы и ширину элементов, а если их в меню станет больше, то можно будет просто уменьшить шрифт. Даже при добавлении адаптивности блок с элементами будет смотреться прилично.
Чтобы выровнять наши элементы на всю ширину вне зависимости от их длины и без указания отступов c условием, что они будут занимать расстояние от края до края блока, нам понадобится известное свойство text-align: justify. Оно выравнивает элементы по ширине, но это работает только в многострочном контейнере. Сэмулируем такое поведение при помощи псевдоэлемента :after для создания второй пустой строки .
HTML
1
2
3
4
5
6
7
|
<div class=’’header__menu‘’>
<ul class=’’menu__list‘’>
<li class=’’menu__item‘’>Home</li>
<li class=’’menu__item‘’>Contacts</li>
<li class=’’menu__item‘’>About us</li>
</ul>
</div>
|
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.menu__list {
text-align: justify;
}
.menu__list:after {
content: «»;
display: inline-block;
width: 100%;
height: 0;
}
.menu__item{
display: inline-block;
}
|