使用jquery插入LI元素看起来与硬编码元素不同

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>

由于这会使HTML变得丑陋，您可能还想看看这个discussion。特别是Jon Grant的回答可能是一个选择。

Answer 2

答案很简单：

您在两个硬编码的<li>项目中插入了一个加号空格。

在这里看看：:)）

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

Answer 3

在你的CSS中你写了xmargin: 0 5px 0 0 ;，这是无效的，浏览器无法识别。当您撰写margin: 0;时，它会删除li的空格。你应该总是validate your CSS！

您的代码中也有两次相同的ID，但ID必须是文档的唯一ID。