Почему перестали распределятся пункты меню с помощью text-align: justify?

Question

[Odinokun]

Доброго времени суток.
Подскажите плз, почему могли перестать равномерно распределятся по ширине пункты меню?
Задавал распределение с помощью text-align: justify и псевдоэлемента.
В верстке все ок, но после подключения на ModX все пункты начали выравниваться по левому краю.
Стили подключены нормально, структура тоже соблюдена.
Вот сайт.
Вот ссылка на скрин.

Answer 1

[iBird Rose]

если используешь text-align: justify; для inline-block элементов, то ты должен помнить что каждый элемент становится словом. и чтобы он их раскидал по строке - между твоими li должен стоять либо пробел, либо перенос строки. в самом html.
кароч у тебя они идут так

<ul class="menu__list"><li class="menu__item"><a href="index.php?id=7" class="menu__link">Акции</a></li><li class="menu__item"><a href="#salons" class="menu__link">Салоны</a></li><li class="menu__item"><a href="#service" class="menu__link">Услуги</a></li><li class="menu__item"><a href="http://orange.proshift.ru/" class="menu__link logo"><img src="assets/img/logo.svg" alt="logo"></a></li><li class="menu__item"><a href="index.php?id=5" class="menu__link">Мастера</a></li><li class="menu__item"><a href="index.php?id=6" class="menu__link">Новости</a></li><li class="menu__item"><a class="menu__link" href="#">
            </a><div class="btn-link__wrap"><a class="menu__link" href="#"></a><a class="btn-link" href="">Записаться</a></div></li></ul>

а надо так

<ul class="menu__list">
    <li class="menu__item"><a href="index.php?id=7" class="menu__link">Акции</a></li>
    <li class="menu__item"><a href="#salons" class="menu__link">Салоны</a></li>
    <li class="menu__item"><a href="#service" class="menu__link">Услуги</a></li>
    <li class="menu__item"><a href="http://orange.proshift.ru/" class="menu__link logo"><img src="assets/img/logo.svg" alt="logo"></a></li>
    <li class="menu__item"><a href="index.php?id=5" class="menu__link">Мастера</a></li>
    <li class="menu__item"><a href="index.php?id=6" class="menu__link">Новости</a></li>
    <li class="menu__item"><a class="menu__link" href="#"></a><div class="btn-link__wrap"><a class="menu__link" href="#"></a><a class="btn-link" href="">Записаться</a></div></li>
</ul>

если по простому, то он твои li воспринимает как одно длинное слово. одно слово.

Comments

[Odinokun]

Помогло. Спасибо.