Мистика с 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

1 709

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

Андрей

09 июня 2017, 09:29

Не знаю как вы выравниваете, но если text-align: justify, то между пунктами меню должны быть переносы или пробелы иначе работать не будет.

Проще конечно с помощью display: flex; justify-content: space-between;

mail

09 июня 2017, 12:12

блин, точно ) он все пробелы поубирал ) спасибо )

Наумов Алексей

09 июня 2017, 10:10

Я обычно через имитацию таблиц делаю.

mail

09 июня 2017, 12:14

Я обычно тоже, но что-то (уже не помню что) не хотело работать с имитацией таблиц… кажется, ячейка не хотела перенимать от «родителя» 100% высоту. Поэтому плюнул и всунул грабли с text-align. А т.к. пользуюсь им редко, не подумал, что там пробелы должны быть, как выше подсказал Андрей )

mngatoff

10 июня 2017, 15:59

ячейка не может не перенимать у родителя высоту. Разве что Вы к ней float: left припилили, тогда да. У table-cell не должно быть никаких флоатов

mngatoff

10 июня 2017, 16:02

а пробел можно насильственно вставить —

<li{$classes}>
	<a href="{$link}" {$attributes}>{$menutitle}</a>
	{$wrapper}
</li>{if !$_pls['wf.last']} <!-- -->{/if}

Гриборий

10 июня 2017, 19:03

&nbsр;

mngatoff

10 июня 2017, 19:32

во-первых, nbsp (non-breaking space), во-вторых, это не сработает, так как отрежется функцией trim() в сниппете

mail

10 июня 2017, 23:14

&nbsр; сразу вставил, когда долшо в чем дело — все работает. А ячейка высоту перенимать почему-то действительно не хочет, если у родителя высота в процентах задана. У меня там что-то вроде

элемент - высота 150рх
	дочерний элемент - высота 50%
	дочерний элемент - высота 50%
		контейнер меню - высота 100%;
			ячейка - высота 100%

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

Ничего, что мы тут css-ом засоряем?…

mngatoff

10 июня 2017, 23:21

чтобы table-cell перенял высоту, родитель должен быть table или table-row.

mail

11 июня 2017, 11:48

Пробовал, конечно. Но тогда что-то там все равно не работало.

mngatoff

11 июня 2017, 12:07

значит, не так пробовали)

mail

11 июня 2017, 13:41

Просто с table-cell оно сходу не заработало, а с text-align — да. Я почти не сомневаюсь, что можно было и с table-cell сделать, но последнее время отдаю предпочтение не перфекционизму, а экономии времени )))

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

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.