Распределение inline-block элементов в ширину блока с помощью text-align: justify
Наверное, каждый верстальщик веб сайтов сталкивался с задачей, когда нужно равномерно равномерно распределить элементы внутри блока. Это могут быть пункты меню, которые динамически меняются со временем. Если пользоваться просто отступами по краям элементов, то может возникнуть ситуация с неправильным подсчетом размеров и один элемент уползет на новую строку, что испортит всю верстку.
Решается данная задача с помощью inline-block отображения элементов и text-align: justify.
Берем разметку:
1 2 3 4 5 6 | <ul class="nav"> <li><a href="">Пункт 1</a></li> <li><a href="">Длинный пункт 2</a></li> <li><a href="">Еще длиннее пункт 3</a></li> <li><a href="">4</a></li> </ul> |
И стили css (убрана стилизация):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | ul.nav { text-align: justify; } ul.nav li { display: inline-block; position: relative; } ul.nav:before{ content: ''; display: block; width: 100%; height: 0; } ul.nav:after { width: 100%; height: 0; visibility: hidden; overflow: hidden; content: ''; display: inline-block; } |
В итоге получаем: