DIV之间的空白影响布局

Question

假设我有以下HTML/CSS代码，用于创建两列DIV，每个DIV宽度为50像素。

<div style="width:100px;margin:0px;">
    <div style="width:50px; display:inline-block;">A</div><!-- HERE -->
    <div style="width:50px; display:inline-block;">B</div>
</div>

在这段代码中，如果我在两个内部div之间没有任何空格（即在<!-- HERE -->处）：

<div style="...">
    <div style="..."></div><div style="..."></div>
</div>

然后HTML被呈现为两列，与预期相同。然而，如果在它们之间有任何空格，它们就不会并排呈现，因为空格字符占用非零宽度。

显而易见的解决方案是不要在内部DIV之间有任何空格，但是，我正在使用HTML自动格式化程序来格式化我的HTML代码，它会在两个内部DIV之间自动插入空格。

是否有任何解决方案，以便在它们之间有空格时，两个内部DIV可以按预期呈现？

- Jeeyoung Kim

---

你可以将它们定位在一起，使它们彼此接触。 - qwertymk

Answer 1

将white-space:nowrap; word-spacing:0;添加到100px容器中。

无需使用浮动、定位等。

<div style="width:100px;margin:0px;white-space:nowrap; word-spacing:0;">
    <div style="width:50px; display:inline-block;background:#efefef;">A a</div><!-- HERE --><div style="width:50px; display:inline-block;background:#ccc;">B b</div>
</div>

这是代码演示链接： http://jsfiddle.net/3yQ6L/2/。

- Dawson

---

white-space: nowrap虽然不会消除间隙。 - eyelidlessness

是的，你还需要添加 word-spacing。回答已更新。本质上，A 和 B div 现在是带有 inline-block 属性的两个单词。 - Dawson

哇塞！我不知道有一个word-spacing属性。它在各种浏览器中的支持情况如何（比如IE6）？ - eyelidlessness

看起来IE6是第一个支持它的版本。你很幸运 :) http://msdn.microsoft.com/en-us/library/bb250395%28v=vs.85%29.aspx请查看“介绍”的第二句话。 - Dawson

谢谢！这比“字体大小”黑科技要好得多。 - eyelidlessness

我理解使用 white-space: nowrap 和 word-spacing 似乎是关键，但当我在我认为类似的情况下使用 word-spacing: 0;（四个 div，每个占 25%）时，它并没有达到我期望的效果。为了获得所需的效果（在具有空格的 div 之间没有可见空格），我需要使用 word-spacing: -4px; 或 word-spacing: -1em;（？），这似乎有些 hacky :-\ -- 你知道为什么会有这种不同吗？（仅开发 IE8+）我应该单独提出这个问题吗？ - Code Jockey

Answer 2

关于什么呢？

div style="width:100px;margin:0px;">
<div style="width:50px; display:inline-block;">A</div><!-- 
--><div style="width:50px; display:inline-block;">B</div>

如果你使用的是 PHP 等语言

    div style="width:100px;margin:0px;">
<div style="width:50px; display:inline-block;">A</div><? /*
*/ ?><div style="width:50px; display:inline-block;">B</div>

不知道这是否有帮助

- gio

---

这个答案让我微笑，可爱的技巧。 - Geri Borbás

Answer 3

您可以浮动内部的div并在外部添加overflow: hidden：

<div style="width:100px;margin:0px;overflow:hidden;">
    <div style="width:50px; float: left;">A</div>
    <div style="width:50px; float: left;">B</div>
</div>

http://jsfiddle.net/ambiguous/3yQ6L/1/

- mu is too short

Answer 4

Inline-block会像图像或文本字符一样运作，因此它们之间的空间将取决于字体大小。

您可以尝试将它们浮动到左侧，或者尝试将字体大小设置得非常小。您还可以在第二个框上尝试负左边距。

- pixelearth