javascript - 使用 after() 添加的 jQuery 元素的间距不正确

Question

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

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

我做了一个jsbin来演示这里

另外，截图解释一下：

在此处输入图像描述

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

score 10 · Accepted Answer

答案是因为<li>元素是inline, 并且在您的 HTML 中由换行符分隔，在渲染时会在它们之间创建一个空格。

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

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

这个效果的演示

score 2 · Accepted Answer

正如SW4所说。之间没有间距<li>

在这里它可以工作 http://jsbin.com/licowaqe/4/edit HTML中的区别

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

score 0 · Accepted Answer

简单的解决方法是 -文章

ul#list{      
    font-size: 0;
}

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