2

我有一个将值列表加载到列表框中的页面。页面加载时从数据库中检索这些值，并使用 PHP 构建列表。

页面加载后，用户可以输入一个新值并通过 jQuery 将其添加到列表中。新的列表项使用 jQuery 构建为 DOM 树，但在各方面都与 PHP 生成的列表项相同。我使用 Chrome 开发工具比较了两者，它们是相同的。

无论如何，这一切都很好，除了插入 jQuery 的跨度之一的位置略有不同。

一个例子

（橙色虚线是为了视觉参考而添加的；它们是outline值，因此它们不会影响任何元素的定位）

我对两者都使用相同的类，我什至用 Chrome 检查了计算的样式。PHP插入的列表项和jQuery插入的列表项样式完全相同。然而，通过 jQuery 插入的 Smith Bob 并没有排队。

这可能是什么原因造成的？

我没有发布任何 CSS，因为有很多，我不确定它会有多少帮助。由于我查看了每个单独的计算值并且它们都是相同的，我认为这可能不是 CSS 问题。

编辑： [删除测试 URL，因为它驻留在我无法控制的服务器上，鉴于问题已得到解答，似乎不再需要]

左侧列表中的红色追加按钮应该将项目添加到右侧列表中，但它们似乎没有排列，就像上图一样。

4

2 回答 2

1

老实说，我认为问题不是用户插入的项目，而是在页面加载时插入的项目。

当我在英文版 Chrome 中启动该页面时，“当前活动项目”列表全部搞砸了。删除每个项目，然后通过单击带有红色文本的按钮再次添加它们使列表看起来不错。它还使鼠标悬停再次正常工作，因为每个项目都存在于单行上，而不是其中 2 - 1 个与相邻元素重叠。

这就是我所看到的。左图是页面加载后立即显示的，右图显示了清除并重新填充后的列表。

在此处输入图像描述

为完整性而添加的代码 - 在下面的评论中承诺。如果它可以帮助别人，那就太好了！

<script>
<?php
    printf("var apartmentComplexes = { mArray : %s };", json_encode($apartmentComplexes));
?>

// an exerpt of what above statement produces
var apartmentComplexes = { mArray : [{"name":"Aria","description":"Uma das<br> mais exclusivas propostas de Porto ......

function myOnLoad()
{
    var numComplexes = apartmentComplexes.mArray.length;

    // do some other stuff with the apartmentComplexes object


    setPageApartmentComplex(0);
}

</script>
于 2012-10-12T08:36:30.250 回答
1

使用内联元素，您可能会在 html 代码中看到空格。你可以测试一下。创建一个无序列表，使 li 的内联（给它们一个 BG 颜色）。你能看到空间吗？现在让它们浮动-> 繁荣，空间消失了。

在您的 PHP 代码中，html 的格式很好。您的跨度是内联元素，因此它们显示（空白）空间。您通过 javascript 插入的 HTML 没有格式化，而是连接在一起，中间没有空格，因此没有空格可以显示。

所以浮动你的跨度，你的问题就解决了。

于 2012-10-12T09:05:38.377 回答