1

我有一个区域，我想在其中添加两个按钮。代码很简单：

<div id="switcher"> 
 <div class="button" id="Sunday">Sunday</div>
 <div class="button" id="mic">mic</div>
 </div>

该演示位于http://jsfiddle.net/zhshqzyc/vBbeQ/

如果我们使用相同的 CSS，但是将两个元素的代码重写在一行中：

<div id="switcher"> 
<div class="button" id="Sunday">Sunday</div><div class="button" id="mic">mic</div>
</div>

该演示位于http://jsfiddle.net/zhshqzyc/vBbeQ/1/ 第一种情况下似乎有换行符，但 jsfiddle 无法识别它。

是jsfiddle的bug吗？

谢谢。

4

3 回答 3

3

不，这就是display: inline-block;工作原理。它对元素周围的空白很敏感（就像display: inline;），所以：

<div id="switcher">
    <div class="button" id="Sunday">Sunday</div>
<div class="button" id="mic">mic</div>
</div>

与此不同：

<div id="switcher">
    <div class="button" id="Sunday">Sunday</div><div class="button" id="mic">mic</div>
</div>

这会影响渲染，因为浏览器会在两个.button元素之间渲染一个空间。结果，它们不再适合在同一条线上。

在http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/上有更多关于 inline-block 的内容

于 2012-08-01T12:28:07.917 回答
2

这是因为switcherDIV 的宽度而发生的。

当您编写带有换行符的代码时，它将在 DIV 之间打印出一点“空白”。并且 2 个buttonDIV 加上“空白”的宽度大于switcherdiv 的宽度。

看这里

于 2012-08-01T12:34:36.887 回答
1

这不是因为它们在同一行，而是因为两个 DIV 之间没有空格。将第二个更改为：

<div class="button" id="Sunday">Sunday</div> <div class="button" id="mic">mic</div>

它的行为就像第一个一样。这与 jsfiddle 无关，它只是 HTML 的工作方式：如果没有分隔符，它不会断行。

于 2012-08-01T12:29:37.773 回答