Что за элемент отображается в дебагере мозилы? Как его можно убрать?

354
04 июня 2017, 18:07

Здравствуйте, есть менюшка, которая выводится циклом с CMS, тоисть все элементы по идее должны быть одинаковы, но в дебагере присутсвуют пробелы (как я понял) , как их можно убрать?

{% unless level_limit %}
{% assign level_limit = 2 %}
{% endunless %}
{% unless show_icon %}
  {% assign show_icon = false %}
{% endunless %}
{% if source_type == 'collection' %}
  {% assign prev_link_level = 1 %}
  {% assign root_level = collections[source_handle].level %}
  <ul class="{{ menu_class }} menu level-1">
    {% for link in collections[source_handle].flatten_branch %}
      {% assign node_level = link.level | minus: root_level %}
      {% assign _in_limit = level_limit | minus: node_level %}
      {% assign _next_level_in_limit = _in_limit | minus: 1 %}
      {% assign show_level = false %}
      {% if _in_limit >= 0 %}
        {% assign show_level = true %}
      {% endif %}
      {% assign show_next_level = false %}
      {% if link.subcollections.size > 0 and  _next_level_in_limit >= 0 %}
        {% assign show_next_level = true %}
      {% endif %}
      {% assign current = '' %}
      {% if show_level %}
        {% if link.current? %}
          {% assign current = 'is-current' %}
        {% endif %}
        {% assign level_difference = prev_link_level | minus: link.level | plus: root_level %}
        {% if level_difference > 0 %}
          {% for i in (1..level_difference) %}
            </ul>
          {% endfor %}
        {% endif %}
        <li class="{{ menu_class }}-item menu-item level-{{ node_level }} {{ current }}">
          {% if show_icon %}
            <span class="{{ menu_class }}-icon menu-icon level-{{ node_level }}"></span>
          {% endif %}
          <a href="{{ link.url }}" class="{{ menu_class }}-link menu-link level-{{ node_level }}">{{ link.title }}</a>
          {% if show_next_level %}
          <div class="{{ menu_class }} menu level-{{ node_level | plus: 1 }}">
          <div class="container level-2-list-wrap">
            {% if menu_type != 'mobile' %}
              {% if block_lists.horizontal-menu-img.blocks.size > 0 %}
                <div class="header-menu-item-img-wrap">
                  {% for block in block_lists.horizontal-menu-img.blocks %}
                    {% assign link_handle = block.handle | split: '__' %} 
                    {% if link.handle == link_handle[0] %}
                      <a href="{{ block.url }}" class="header-menu-item-img">
                        <div style="background-image: url({{ block.image }})" class="header-menu-item-bg">
                        </div>
                        <div class="header-menu-item-title">
                          {{ block.description }}
                        </div>
                      </a>
                    {% endif %}
                  {% endfor %}
                </div>
              {% endif %}
            {% endif %}
            <ul class="level-2-list {% if link.handle == 'podarki' %}level-2-list-col-1{% endif %} ">
          {% endif %}
        </li>
        {% assign prev_link_level = node_level %}
        {% if forloop.last %}
          {% assign prev_link_level = node_level | minus: 1 %}
          {% for i in (1..prev_link_level) %}
                </ul>
              </div>
            </div>
          {% endfor %}
        {% endif %}
      {% endif %}
    {% endfor %}
  </ul>
{% else %}
  <ul class="{{ menu_class }} menu">
    {% for link in linklists[source_handle].links %}
      {% assign current = '' %}
      {% if link.current? %}
        {% assign current = 'is-current' %}
      {% endif %}
      <li class="{{ menu_class }}-item menu-item level-1 {{ current }}">
        {% if show_icon %}
          <span class="{{ menu_class }}-icon menu-icon level-1"></span>
        {% endif %}
        <a href="{{ link.url }}" class="{{ menu_class }}-link menu-link level-1">
          {{ link.title }}
        </a>
      </li>
    {% endfor %}
  </ul>
{% endif %}
{% assign prev_link_level = null %}
{% assign source_handle = null %}
{% assign menu_class = null %}
{% assign source_type = null %}
{% assign show_icon = null %}
{% assign level_limit = null %}
Answer 1

Метод научного тыка подсказывает, что фаерфокс таким образом показывает текстовые узлы, состоящие только из пробельных символов

Соответственно, чтобы он пропал, нужно в исходном коде убрать между </li> и <li> все пробельные символы (перенос строки это тоже пробельный символ). Но если от этого не едет вёрстка, то какой в этом смысл? :)

Answer 2

Просто текстовый узел:

ul { 
  text-align: center; 
  margin: 0; 
  padding: 0; 
  list-style: none; 
} 
 
li { 
  display: inline-block; 
  margin: 0; 
  padding: 0 .5em; 
}
<ul> 
  <li>Первый</li><li>Второй</li><li>Третий</li> 
</ul>

И скриншот из devtools FF:

READ ALSO
TABLE выходит за правую границу DIV

TABLE выходит за правую границу DIV

как поместит содержимое TABLE в DIV не выходя из границы DIV сейчас выглядеть так:

275
Ошибка при загрузке js, Uncaught Error: Bootstrap&#39;s JavaScript requires jQuery

Ошибка при загрузке js, Uncaught Error: Bootstrap's JavaScript requires jQuery

Доброго времени сутокПытаюсь воспользоваться скриптом из js файла, но выдается ошибка

462
Как вытащить данные из цикла внутри SELECT

Как вытащить данные из цикла внутри SELECT

Есть таблица в MySQL под названием doctorsТаблица состоит из uid (уникальный идентификатор доктора) и fio (ФИО)

346
Адаптирование сайта

Адаптирование сайта

У меня сайт wwwbakunights

252