villiwalla
@villiwalla
HTML-верстка

Странное поведение меню (если вытягивать разметку в строку) через pdoMenu, почему?

Так выглядит меню в верстке:
5a197dca63f91663430982.png
<nav>
	<ul class="nav">
		<li class="nav--item nav--item_active">
			<a class="nav--link" href="index.html">Main page</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="about.html">About</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Partnership</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Research</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Innovations</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Production</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Distributors</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Education</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="news.html">News</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Contacts</a>
		</li>
	</ul>
</nav>

Стили меню:
.main-nav-wrapper {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 15px; }

.nav {
  height: 42px;
  padding-left: 0;
  position: relative;
  text-align: justify;
  margin-top: 10px;
  font-size: 17px; }
  .nav:after {
    content: "";
    display: inline-block;
    font-size: 0;
    line-height: 0;
    text-align: justify;
    width: 100%; }
  .nav--item {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    position: relative;
    text-align: justify;
    vertical-align: middle;
    border-bottom: 3px solid transparent;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s; }
    .nav--item:hover {
      border-bottom: 3px solid #2FB56D; }
    .nav--item_active {
      border-bottom: 3px solid #2FB56D; }
  .nav--link {
    display: block;
    padding: 9px 0;
    color: #000000;
    text-decoration: none;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s; }
    .nav--link:hover {
      text-decoration: none;
      color: #2FB56D; }

.nav--item_active .nav--link {
  color: #2FB56D; }


Всё вроде бы хорошо, но вот вывод через pdoMenu, все пункты меню прижимаются к левому краю (первое меню это вывод pdoMenu, второй просто статика из шаблона):
5a197e8cebdcc656718671.png

https://jsfiddle.net/rrneqasy/ Если начать вытягивать в строку (https://jsfiddle.net/ea7jhrjy/) меню сбивается в левом крае, почему?
  • Вопрос задан
  • 99 просмотров
Пригласить эксперта
Ответы на вопрос 1
webrevenue
@webrevenue
Веб-дизайнер и SEO оптимизатор
PdoMenu в вашем случае точно не причем. скорее всего вы не правильны вывод делаете. покажите как вы его вызываете
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы