插入LI元素jQuery的外觀不同於硬編碼的

Question

我有一個菜單（請參閱示例）。它有兩排。上面的一個是硬編碼的，最下面的是用jquery插入的。問題是，上面的行在LI元素之間有一些間距，而底部的行沒有。我錯過了什麼？

例子：http://jsfiddle.net/s3rVg/

Answer 1

如果刪除上面的列表中的元素[li]的HTML失去它的空白，以及之間的空白。像：

<li class="" onclick="/admin/oink;">Oink</li><li class="" onclick="/admin/super;">Piglet</li> 

由於這uglifies的HTML，你也可能想看看這個discussion。尤其是喬恩格蘭特的答案可能是一個選擇。

Answer 2

的答案很簡單：

你插入一個加空間分成兩個硬編碼<li>項目。

看這裏：:)

http://jsfiddle.net/s3rVg/2/

Answer 3

在你的CSS你writen xmargin: 0 5px 0 0 ;，這是無效的，而不是由瀏覽器識別。當你只寫margin: 0;它將刪除li的空間。你應該總是validate your CSS！

另外，您的代碼中有兩次相同的ID，但ID必須對文檔是唯一的。