用after（）添加的jQuery元素具有不正确的间距

I have a <ul> with a number of <li> elements in it. A number of them are hidden and are added to the end of the list upon clicking with jQuery after().

我有一个

，其中包含许多
• 元素。其中一些是隐藏的，并在（）后点击jQuery时添加到列表的末尾。

• 元素。其中一些是隐藏的，并在（）后点击的jQuery时添加到列表的末尾。

However, for some reason, the elements added with after() are always a bit too close to the element they are added after.

但是，由于某种原因，使用after（）添加的元素总是与它们之后添加的元素太接近。

I have made a jsbin to demonstrate here

我在这里做了一个jsbin演示

Also, a screenshot to explain:

另外，截图解释：

The reason for using after() instead of a simple addClass or show is because the list relies on applying styles with li:nth-child(even), so if the elements are there, but only hidden, it causes issues in the styling of the list.

使用after（）而不是简单的addClass或show的原因是因为列表依赖于使用li：nth-​​child（even）应用样式，所以如果元素在那里，但只是隐藏，则会导致样式中出现问题列表。

3 个解决方案

#1

The answer is because the <li> elements are inline, and in your HTML are separated by a newline, which when rendered creates a space between them.

答案是因为

元素是内联的，并且在HTML中由换行符分隔，换行符在换行符之间创建一个空格。

元素是内联的，并且在HTML中由换行符分隔，换行符在换行符之间创建一个空格。

When you are programatically inserting elements, they are not separated by a newline so no space appears between them.

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

You can see the effect of the newline by placing all the li elements on a single line, the spacing will disappear, or by adding float:left to the li in your CSS

您可以通过将所有li元素放在一行上来显示换行的效果，间距将消失，或者通过向CSS中的li添加float：left

Demo of this effect

More reading...

更多阅读......

#2

As SW4 said. there is no spacing between the <li>

正如SW4所说。

之间没有间距

之间没有间距

Here it works http://jsbin.com/licowaqe/4/edit the difference ist in the HTML

这里有http://jsbin.com/licowaqe/4/edit在HTML中的区别

data-additional=" <li>Four</li> <li>Five</li> <li>Six</li>" has spaces

data-additional =“

四

四

五

五

六 ”有空格

六”有空格

#3

easy fix would be - article

容易修复 - 文章

DEMO

DEMO

ul#list{      
    font-size: 0;
}

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