Мистика с pdoMenu и justyfy в CSS

Меню должно растягивается на всю ширину блока. В статичном макете все работает. Если меню герерирую при помощи pdoMenu, оно не растягивается. При чем все стили применяются правильно кроме justify. Если меняю justify на right — все работает, меню выравнивается по правому краю. pdoMenu генерирует точно такой же хтмл, как в статичной версии. Сравнил все до последнего символа. Если копирую то, что сгенерировал pdoMenu и вставляю вместо [[+wrapper]] тоже все работает. Для меня полная мистика.

<nav id="main-nav-row" class="row">
    <div id="nav-holder" class="col-xs-12">
        <ul class="hidden-xs hidden-sm">
            	<li class="first active"><a href="index.php?id=1"><span>пункт 1</span></a></li>
		<li><a href="index.php?id=2"><span>пункт 2</span></a></li>
		<li><a href="index.php?id=3"><span>пункт 3</span></a></li>
		<li><a href="index.php?id=4"><span>пункт 4</span></a></li>
		<li><a href="index.php?id=5"><span>пункт 5</span></a></li>
		<li><a href="index.php?id=6"><span>пункт 6</span></a></li>
		<li class="last"><a href="index.php?id=7"><span>пункт 7</span></a></li>
        </ul>
        <a href="#" id="show-mobile-nav" class="visible-xs visible-sm"><span><i class="icon-menu"></i>Menu</span></a>
    </div>
</nav>
mail
08 июня 2017, 20:36
modx.pro
1 620
0

Комментарии: 13

Андрей
09 июня 2017, 09:29
1
+2
Не знаю как вы выравниваете, но если text-align: justify, то между пунктами меню должны быть переносы или пробелы иначе работать не будет.

Проще конечно с помощью display: flex; justify-content: space-between;
    mail
    09 июня 2017, 12:12
    0
    блин, точно ) он все пробелы поубирал ) спасибо )
    Наумов Алексей
    09 июня 2017, 10:10
    +2
    Я обычно через имитацию таблиц делаю.
      mail
      09 июня 2017, 12:14
      +1
      Я обычно тоже, но что-то (уже не помню что) не хотело работать с имитацией таблиц… кажется, ячейка не хотела перенимать от «родителя» 100% высоту. Поэтому плюнул и всунул грабли с text-align. А т.к. пользуюсь им редко, не подумал, что там пробелы должны быть, как выше подсказал Андрей )
        mngatoff
        10 июня 2017, 15:59
        0
        ячейка не может не перенимать у родителя высоту. Разве что Вы к ней float: left припилили, тогда да. У table-cell не должно быть никаких флоатов
          mngatoff
          10 июня 2017, 16:02
          0
          а пробел можно насильственно вставить —
          <li{$classes}>
          	<a href="{$link}" {$attributes}>{$menutitle}</a>
          	{$wrapper}
          </li>{if !$_pls['wf.last']} <!-- -->{/if}
            Гриборий
            10 июня 2017, 19:03
            0
            &nbsр;
              mngatoff
              10 июня 2017, 19:32
              0
              во-первых, nbsp (non-breaking space), во-вторых, это не сработает, так как отрежется функцией trim() в сниппете
                mail
                10 июня 2017, 23:14
                0
                &nbsр; сразу вставил, когда долшо в чем дело — все работает. А ячейка высоту перенимать почему-то действительно не хочет, если у родителя высота в процентах задана. У меня там что-то вроде

                элемент - высота 150рх
                	дочерний элемент - высота 50%
                	дочерний элемент - высота 50%
                		контейнер меню - высота 100%;
                			ячейка - высота 100%
                Так вот, если ячейке ставить display: table-cell, то она на всю высоту не растягивается. Если у ближайшего родителя высота в пикселях — тогда работает. А так, как в примере выше — на конкретном сайте не захотело. Может там где-то что-то я и напартачил. На саомм деле там структура более сложная, лень было разбираться, поэтому и сделал из нее inline-block и растянул все по ширине justufy

                Ничего, что мы тут css-ом засоряем?…
                  mngatoff
                  10 июня 2017, 23:21
                  0
                  чтобы table-cell перенял высоту, родитель должен быть table или table-row.
                    mail
                    11 июня 2017, 11:48
                    0
                    Пробовал, конечно. Но тогда что-то там все равно не работало.
                      mngatoff
                      11 июня 2017, 12:07
                      +1
                      значит, не так пробовали)
                        mail
                        11 июня 2017, 13:41
                        0
                        Просто с table-cell оно сходу не заработало, а с text-align — да. Я почти не сомневаюсь, что можно было и с table-cell сделать, но последнее время отдаю предпочтение не перфекционизму, а экономии времени )))

                        П.С. Обратите внимание, что я не пишу «оно так не работает», а пишу, что конкретно в моем случае оно так работать не хотело )
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        13