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之间没有任何空格（即所在的位置）：

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

然后按预期方式将HTML呈现在两列中。但是，如果我们之间有任何空格，则它们不会并排呈现，因为空白字符占用非零宽度。

对此明显的解决方案是在内部DIV之间没有任何空格，但是，我使用HTML自动格式来格式化我的HTML代码，并且它会自动在两个内部DIV之间插入空格。

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

Answer 1

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

否floats，positioning等

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

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>

不知道如果那有帮助

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/

Answer 4

内联块的行为类似于图像或文本字符，因此它们之间的空间将取决于字体大小。

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

DIV之间的空白扰乱了布局

4 个答案: