Распределение inline-block элементов в ширину блока с помощью text-align: justify

Наверное, каждый верстальщик веб сайтов сталкивался с задачей, когда нужно равномерно равномерно распределить элементы внутри блока. Это могут быть пункты меню, которые динамически меняются со временем. Если пользоваться просто отступами по краям элементов, то может возникнуть ситуация с неправильным подсчетом размеров и один элемент уползет на новую строку, что испортит всю верстку.

Решается данная задача с помощью inline-block отображения элементов и text-align: justify.

Берем разметку:

И стили css (убрана стилизация):

В итоге получаем: