html - 是不是jsfiddle的bug

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的bug吗？

谢谢。

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/ 上有更多关于行内 block 的内容