Javascript 使用after（）添加的jQuery元素的间距不正确

我有一个

，里面有许多

元素。使用jQuery

after（）

单击后，其中许多将被隐藏并添加到列表的末尾

但是，由于某些原因，在（）之后添加了

after（）

的元素总是有点太接近它们之后添加的元素

我制作了一个jsbin来演示

此外，还有一个屏幕截图来解释：

---

使用

after（）

而不是简单的

addClass

或

show

的原因是列表依赖于应用带有

li:n子项（偶数）

的样式，因此如果元素在那里，但仅隐藏，它会导致列表的样式出现问题。

答案是因为

元素是

内联的，并且在HTML中由新行分隔，在呈现时会在它们之间创建一个空格

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

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

正如SW4所说。

它在这里工作
区别在于HTML

data additional=“
Four
Five
Six
”
中有空格

ul#list{      
    font-size: 0;
}

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


ul#list{      
    font-size: 0;
}

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

我似乎在你的jsbin中没有看到这种效果，所有的jsbin都有相同的间距。@Esa你点击了吗？然后你可以看到区别。我确实看到了效果，我用的是Chrome。哦，是的，你需要点击“两个”对不起。我现在明白了。虽然注意到这在Android的某些版本上不起作用，但如果这是一个问题的话，谢谢你，我真的很感谢这个链接，它提供了关于这个问题的更多信息，而且非常简洁。