CSS - Пробел после "|" при добавлении после

У меня здесь jsfiddle - https://jsfiddle.net/3sph9wpg/5/

Супер простой У меня есть список с дисплеем: inline; для создания горизонтальной навигации

Мне нужен бар между каждым элементом, который я могу добавить после

Моя проблема в том, что у меня, кажется, есть пробел после бара, который я не могу удалить

Мне нужно добавить пробел внутри

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

    ul{
        list-style: none;

        li{
            display: inline-block;

            &:after{
                content: "|";
            }
        }
    }

Ответ 1

Это не связано с ::after - потому что display: inline-block заставляет пробел между узлами (т.е. между одним закрывающим тегом и следующим открывающим тегом) анализироваться как одно пространство.

Там несколько способов. Поскольку размер добавленного пространства продиктован унаследованным размером шрифта, один из подходов состоит в том, чтобы установить размер шрифта 0 в родительском ul.

CSS

ul { font-size: 0; }

Вывод:

one|two|three

Никакие пробелы теперь не отображаются между узлами. Однако это может привести к тому, что проблемы LI имеют относительный размер шрифта, установленный в em. Использование пикселей или бэка оборачивает эту проблему.

Fiddle.

Другой подход - использовать float, а не inline-block, который не страдает от этой проблемы.

li { float: left; }

Fiddle.

Ответ 2

Это обычная проблема при использовании display: inline-block и наличии дополнительной строки в коде. Чтобы исправить лишнее пространство, просто используйте font-size:0; в родительском элементе ul. Затем вам понадобится reset размер шрифта до значения по вашему выбору в этом li.

https://jsfiddle.net/8vhqyxxr/

Ответ 3

Это фактическое пустое пространство (разрыв строки в этом случае) между элементами li. Это потому, что они являются встроенными блочными элементами.

Если вы удалите перерывы, пробелы исчезнут:

https://jsfiddle.net/3sph9wpg/9/

Существуют и другие возможности, такие как беспорядок с размером шрифта. Размер шрифта 0 приводит к пробелу в нулевой ширине, поэтому вы можете установить font-size: 0 на ul. Но, к сожалению, нет возможности правильно "восстановить" размер шрифта li относительно родительского элемента ul, поэтому вам нужно будет предоставить элементам li явный размер шрифта, который может быть уродливым.

Другое решение, также не очень красивое, помещает пробелы внутри тегов, поэтому оно игнорируется, например:

https://jsfiddle.net/3sph9wpg/10/

Подобная проблема часто встречается, когда вы хотите отображать несколько изображений (также элементы встроенного блока) в одной строке, и я уверен, что вы можете найти множество решений для этой проблемы, которые также применимы к вашим, но большинство, если не все из них, будут хакерскими решениями, такими как упомянутые выше.

Ответ 4

Вы можете использовать атрибут css letter-spacing для самого псевдоэлемента ::after, чтобы исправить его следующим образом:

ul {
  li {
    display: inline-block;

    &:after {
      content: "|";
      letter-spacing: -3px;
    }
  }
}

Fiddle: https://jsfiddle.net/thepio/Lz8z11yw/1/

Поддержка браузера для межстрочного интервала: http://caniuse.com/#search=letter-spacing