jquery - img 标签周围的空格会导致不同的布局

Question

演示:http://jsfiddle.net/q4fW9/3/

我有两个包含完全相同 HTML 的 div。唯一的区别是格式 - 一个全部在一行上，而另一个在多行上。这里的问题是为什么它们显示不同？我在 IE 和 Chrome 中对其进行了测试，结果相同。

所以我遇到的实际问题是，其中一个是在页面加载时创建的(格式正确的)，另一个是通过 jQuery 构建的。那么如何让 jQuery 插入以相同的方式显示呢？

<div><div><img src="http://argrunner.com/images/page-first.gif" class="navButton" /><img src="http://argrunner.com/images/page-prev.gif" class="navButton" /></div></div>
<br /><br /><br />
<div>
    <div>
        <img src="http://argrunner.com/images/page-first.gif" class="navButton" />
        <img src="http://argrunner.com/images/page-prev.gif" class="navButton" />
    </div>
</div>

img.navButton {
    margin: 0 -4px;
}

编辑:澄清问题的第二部分:How do I use jQuery to produce the html in the second div?图片之间有空格的那个。

Answer 1

要使用 jQuery 添加空格，你只需要一个空格就可以达到效果，所以你可以这样做(假设有一个类为 'imgs' 的包装器):

$(".imgs").append('<div> <div> <img src="http://argrunner.com/images/page-first.gif" class="navButton" /> <img src="http://argrunner.com/images/page-prev.gif" class="navButton" /> </div> </div>');

http://jsfiddle.net/q4fW9/8/

如果你想要那个精确的空格，你可以这样做:

$(".imgs").append('<div>\n\t<div>\n\t\t<img src="http://argrunner.com/images/page-first.gif" class="navButton" />\n\t\t<img src="http://argrunner.com/images/page-prev.gif" class="navButton" />\n\t</div>\n</div>');

http://jsfiddle.net/q4fW9/9/

(请注意，这只是执行此操作的一种方法。有多种方法，但主要思想是您正在设置 HTML 字符串。您可以很容易地在普通的旧 javascript 中执行相同的操作使用 innerHTML)