用after()添加的jQuery元素具有不正确的间距

Question

我有<ul>一些<li>元素.其中一些是隐藏的,并在单击jQuery时添加到列表的末尾after().

但是,由于某些原因,添加的元素after()总是与它们之后添加的元素太接近.

我在这里做了一个jsbin演示

另外,截图解释:

使用after()而不是简单的原因addClass或者show是因为列表依赖于应用样式li:nth-child(even),因此如果元素存在但仅隐藏,则会导致列表样式中出现问题.

Answer 1

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

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

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

演示这种效果

更多阅读......