Question

我有一个<ul>，其中包含许多<li>个元素。其中一些是隐藏的，并在点击jQuery after()后添加到列表的末尾。

但是，出于某种原因，添加after()的元素总是与它们之后添加的元素过于接近。

我制作了一个jsbin来演示here

另外，截图解释：

enter image description here

使用after()代替简单addClass或show的原因是因为列表依赖于应用li:nth-child(even)样式，所以如果元素在那里，但是只有隐藏，才会导致列表样式出现问题。

Answer 1

答案是因为<li>元素是inline，并且在HTML中用换行符分隔，换行符会在换行符之间创建一个空格。

当您以编程方式插入元素时，它们不会被换行符分隔，因此它们之间不会出现空格。

您可以通过将所有li元素放在一行上，间距消失，或将float:left添加到CSS中的li来查看换行符的效果/ p>

Demo of this effect

Answer 2

正如SW4所说。 <li>

之间没有间距

data-additional=" <li>Four</li> <li>Five</li> <li>Six</li>"有空格

Answer 3

简单修复将是 - article

<强> DEMO

ul#list{      
    font-size: 0;
}

ul#list li {
    font-size: 36px; /* put the font-size back */
}