Question

我有两个div包含完全相同的HTML。唯一的区别是格式化 - 一个是全部在一行而另一个在多行。这里的问题是为什么它们的显示方式不同？我在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;
}

编辑：澄清问题的第二部分：如何使用jQuery在第二个div中生成html？在图像之间有空格的那个。

Answer 1

要使用jQuery添加空格，你只需要一个空格来获得效果，所以你可以这样做（假设有一个包含类＆＃39; imgs＆＃39;的包装）：

$(".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）

Answer 2

Becausewouldyoubehappyreadingtextlikethis？Idon'tthinkso。

存在空间来解决问题。如果你不想要空格，不要在那里放置空格！就个人而言，我通过在发送之前从响应中删除换行符和标签来实时缩小HTML（但是必须知道空白有意义的地方，例如white-space:pre-wrap元素或<pre>标签）。它有帮助！

Answer 3

在顶部div中，您的IMG标签之间没有空格。

在底部div中，你的IMG标签之间有一个空格。

图像默认显示：内联。这就是为什么你看到歧视。

改善格式以查看差异：

http://jsfiddle.net/q4fW9/7/

<div class="con">
    <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 class="con">
    <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>

.con { overflow:hidden; }
img { float:left; }

Answer 4

这两个图像标签之间有空白区域。它们是内联元素。如果要删除间距，可以浮动图像。

Answer 5

您可以向周围的div添加一个类，并将font-size设置为0，或者（如注释中指出的mdesdev）浮动图像。

*如果您使用font-size方法，请注意使用em作为字体大小的后代。

http://jsfiddle.net/q4fW9/5/

HTML：

<div><div class="icons"><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 class="icons">
        <img src="http://argrunner.com/images/page-first.gif" class="navButton" />
        <img src="http://argrunner.com/images/page-prev.gif" class="navButton" />
    </div>
</div>

CSS：

.icons {
    font-size: 0;
}

img标签周围的空白会导致不同的布局

5 个答案: