Question

我这里有一个jsfiddle - https://jsfiddle.net/3sph9wpg/5/

超级简单我有一个显示列表：inline;创建水平导航

我希望在

后添加的每个元素之间有一个条形

我的问题是我似乎在我不能删除的栏后有空格

我需要在

中添加一个空间，我不喜欢这样做

    ul{
        list-style: none;

        li{
            display: inline-block;

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

Answer 1

这与::after无关 - 因为display: inline-block导致节点之间的空白（即一个结束标记和下一个开始标记之间）被解析为单个空格。

这有几种方法可以解决这个问题。由于添加空间的大小由继承的字体大小决定，因此一种方法是在父ul上设置字体大小为0。

CSS：

ul { font-size: 0; }

输出：

one|two|three

现在节点之间不会显示任何空格。但是，这可能会导致LIs在ems中设置相对字体大小的问题。使用像素或rem来解决这个问题。

Fiddle.

另一种方法是使用浮点数而不是内联块，它不会遇到这个问题。

li { float: left; }

Fiddle.

Answer 2

使用display: inline-block并在代码中添加额外行时，这是一个常见问题。要修复额外空间，只需在父font-size:0;元素上使用ul即可。然后，您需要在此li中将字体大小重置为您选择的值。

https://jsfiddle.net/8vhqyxxr/

Answer 3

这是li元素之间的实际空格（在本例中为换行符）。这是因为它们是内联块元素。

如果删除了休息符，则空格消失：

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

还有其他可能性，比如搞乱字体大小。字体大小为0会产生零宽度空格，因此您可以在font-size: 0上设置ul。但不幸的是，没有办法正确地“恢复”相对于ul的父级的li的字体大小，所以你必须给li元素一个明确的字体大小，这可能很难看。

另一个解决方案，也不是很漂亮，就是在标签内部放置空格，因此会被忽略，如下所示：

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

当您想要在一行上显示多个图像（也是内联块元素）时，通常会发现类似的问题，我确信您可以找到适用于您的问题的众多解决方案，但大多数如果不是全部，那将是像上面提到的那样的hacky-ish解决方案。

Answer 4

您可以在letter-spacing伪元素本身上使用css属性::after来纠正它：

ul {
  li {
    display: inline-block;

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

小提琴：https://jsfiddle.net/thepio/Lz8z11yw/1/

浏览器支持字母间距：http://caniuse.com/#search=letter-spacing

CSS - ＆＃34; |＆＃34;之后的空间当添加后

4 个答案: