css - DIV 之间的空白会破坏布局

Question

假设我有以下 HTML/CSS 包含两列 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 按预期呈现，即使它们之间有空格？

Answer 1

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

没有 float 、定位等

<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>

这是 fiddle :http://jsfiddle.net/3yQ6L/2/