text-align: justify; в inline-block сработает только при добавлении псевдоэлемента (after или before), потому как это свойство выравнивает содержимое по всей ширине кроме последнего элемента (его ровняет по левому краю).
То есть при 2-х строчках - первая растягивается на всю ширину, вторая по левому краю.
Псевдоэлемент заменяет как-бы вторую строчку.
<html> <head> <meta charset="utf-8"> <style> ul { text-align: justify; background: #f2f2f2; } ul::after { display: inline-block; width: 100%; content:''; } li { display: inline-block; } </style> </head> <body> <ul> <li>Главная</li> <li>Новости</li> <li>Товар</li> <li>Контакты</li> </ul> </body> </html>
Боковыми паддингами или маржинами для li можете задать минимальное расстояние между ними.
