javascript - after() で追加された jQuery 要素の間隔が正しくない

Question

私はそれ<ul>にいくつかの<li>要素を持つを持っています。それらの多くは非表示になっており、 jQuery でクリックするとリストの最後に追加されafter()ます。

ただし、何らかの理由で、で追加されafter()た要素は、後で追加された要素に常に少し近すぎます。

ここで示すためにjsbinを作成しました

また、説明するスクリーンショット:

ここに画像の説明を入力

単純なorafter()の代わりに使用する理由は、リストがでスタイルを適用することに依存しているためです。そのため、要素が存在するが非表示になっているだけの場合、リストのスタイリングに問題が発生します。addClassshowli:nth-child(even)

score 10 · Accepted Answer

答えは、<li>要素がinlineであり、HTML では改行で区切られているためです。レンダリングすると、それらの間にスペースが作成されます。

プログラムで要素を挿入する場合、要素は改行で区切られないため、要素の間にスペースは表示されません。

すべてのli要素を 1 行に配置すると、改行の効果を確認できます。間隔が消えるか、CSS にを追加しますfloat:left。li

この効果のデモ

score 2 · Accepted Answer

SW4の言うとおり。の間にスペースはありません<li>

ここで動作します http://jsbin.com/licowaqe/4/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 */
}