css – DIV之间的空白扰乱了布局

假设我有以下 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 autoformatter来格式化我的HTML代码,并且它会自动在两个内部DIV之间插入空格.

有没有任何解决方案,以便两个内部DIV按预期呈现,即使它们之间有空格?

添加白色空间:nowrap;字间距: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/

相关文章
相关标签/搜索