这是jsfiddle的错误吗？

Question

我有一个区域，我想在其中添加两个按钮。代码非常直接：

<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的错误吗？

感谢。

Answer 1

不，这就是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/

有更多关于内联块的内容

Answer 2

由于switcher DIV的宽度而发生这种情况。

当您使用换行符编写代码时，它将在DIV之间打印一些“空白”。并且2 button DIV的宽度加上'空格'，大于switcher div的宽度。

See here

Answer 3

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

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

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