CSS - “|”之后的空格当添加后 [英] CSS - Space after "|" when added with after

问题描述

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

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

我想在每个元素之间添加一个bar，可以在

后添加。

我需要在

里添加一个空格，我不喜欢这样做

  ul {
 list-style：none; 
 
 li {
 display：inline-block; 
 
&：after {
 content：|; 
} 
} 
} 
  

解决方案>

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

这里有几种方法。由于添加空间的大小由继承的字体大小决定，一种方法是在父 ul 上设置字体大小为0。

CSS：

  ul {font-size：0; } 
  

输出：

  one | two | three 
  

现在节点之间不会显示空格。然而，这可能导致LI的相对字体大小设置在ems的问题。使用像素或rem可以绕过这个问题。

小提琴。 a>

另一种方法是使用float而不是inline-block，这不会遇到这个问题。

  li {float：left; } 
  

小提琴。

I have a jsfiddle here - https://jsfiddle.net/3sph9wpg/5/

Super simple I have a list with display:inline; to create a horizontal nav

I want a bar between each element which I can add with after

My problem is I seem to have a space after the bar that I cant remove

I need to add a space inside the

which I don't like doing

    ul{
        list-style: none;

        li{
            display: inline-block;

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

解决方案

This is not related to the ::after - it's because display: inline-block causes the white space between nodes (i.e. between one closing tag and the next opening tag) to be parsed as a single space.

There's several ways round this. Since the size of the added space is dictated by the inherited font size, one approach is to set a font size of 0 on the parent ul.

CSS:

ul { font-size: 0; }

Output:

one|two|three

No whitespace will now show between the nodes. However, this can cause problems of the LIs have a relative font size set in ems. Using pixels or rem's gets round this problem.

Fiddle.

Another approach is to use floats rather than inline-block, which doesn't suffer from this problem.

li { float: left; }

Fiddle.

这篇关于CSS - “|”之后的空格当添加后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！