我有一个页面，它将值列表加载到列表框中。加载页面时，将从数据库中检索值，并使用PHP构建列表。
加载页面后，用户可以输入一个新值，并通过jQuery将其添加到列表中。使用jQuery将新的列表项构造为DOM树，但是它在各个方面都与PHP生成的列表项相同。我用Chrome开发工具比较了两者，它们是一样的。
无论如何，这一切都很好，除了jQuery插入的一个跨度的位置略有不同。
（橙色虚线用于视觉参考；它们是outline值，因此不会影响任何元素的位置）
我对两者使用相同的类，甚至用Chrome检查了计算的样式。PHP插入的列表项和jQuery插入的列表项具有完全相同的样式。然而，通过jQuery插入的Smith Bob并没有排队。
这是什么原因？
我还没有发布任何CSS，因为有很多，我不知道会有多大帮助。因为我看过每个单独的计算值，它们都是相同的，所以我认为这可能不是CSS问题。
编辑：[已删除测试URL，因为它位于我无法控制的服务器上，并且在问题已得到回答的情况下似乎不再需要]
左边列表中的红色追加按钮应该会将项目添加到右边列表中，但它们不会像上面的图像那样排列起来。
最佳答案
对于内联元素，您可能会在html代码中看到空白。
你可以测试一下。创建一个无序的列表en使li的内联（给它们一个BG颜色）。你能看到那个地方吗？现在让它们漂浮->吊杆，空间消失了。
在PHP代码中，html格式很好。跨距是内联元素，因此它们显示（空白）空间。通过javascript插入的HTML没有格式化，但是在两个HTML之间没有空格，因此没有空格可显示。
所以浮动你的跨度，你的问题就解决了。