Пробелы между пунктами меню на wordpress?

Question

[Frank_Sidebottom]

Всем привет. Учусь натягивать вёрстку на вордпресс и вот такой косяк вылез при создании меню. Пробелы между пунктами меню, которые получаются из-за непонятных элементов в коде. Когда навожу на этот элемент, всплывает "whitespace-only текстовый узел".
Кто-нибудь сталкивался с такими пробелами?

Comments

[irve]

Привет, Ссылку на html можете привести?

[Frank_Sidebottom]

irve: дело в том, что пока я верстал обычный HTML шаблон было всё ок (через леттер-спейсинг фиксил пробелы), а когда начал работать с вордпрессом и использовать код для меню, то появились эти пробелы-элементы.

вот собственно код для меню вордпресса,
<?php wp_nav_menu('menu=top_mnu'); ?>

которым я заменил свой html код:

https://jsfiddle.net/7j2pp8wr/

[irve]

Frank_Sidebottom: добавьте, пожалуйста, css и напишите об этом здесь.

[Frank_Sidebottom]

irve: вот примерно вот так https://jsfiddle.net/7j2pp8wr/3/

тут как видно никаких пробелов нет, всё хорошо.

[irve]

Frank_Sidebottom: Опубликуйте свою верстку с пробелами на сервере, чтобы ее можно было посмотреть и напшите сюда, если хотите разобраться в этом вопросе.

[Frank_Sidebottom]

irve: решил проблему! это оказались обычные пробелы которые образуются между строчными элементами. леттер-спейсинг просто напросто не применился при переводе html-меню в вордпресс-меню, поэтому пришлось к классам вордресса применять доп. леттер спейсинг

Answer 1

[Mr Crabbz]

Эта проблема уже 2 года как решается через display:flex для ul, либо float:left для li либо display:inline-block + font-size:0;line-height:0; для ul.

Answer 2

[Владислав Сасс]

Здравствуй.
Автор вопроса уже нашел решение проблемы. И все же кому-нибудь поможет мой ответ.
Есть еще один вариант решения проблемы с отступами между пунктами меню. В этом случае попробуйте вставить пустой комментарий между тегами li.

Пример с комментарием:

<ul>
   <li> ... </li><!--
--><li> ... </li><!--
--><li> ... </li><!--
--><li> ... </li>
</ul>

Решил воссоздать проблему. Вот пару скриншотов.
Проблема c отступами:

Решенная проблема с добавлением пустого комментария между тегами а:

Так выглядит верстка в редакторе:

Answer 3

[Neero_li]

Самый действенный и простой способ задать font-size: 0 родительскому элементу.