1

内部に2つのボタンを追加したい領域があります。コードは非常に単純です。

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

デモはhttp://jsfiddle.net/zhshqzyc/vBbeQ/にあります

同じCSSを使用しているが、2つの要素のコードを1行で書き直した場合：

<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のバグですか？

ありがとう。

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ブラウザは2つの要素の間にスペースをレンダリングするため、これはレンダリングに影響します。その結果、それらはもはや同じ線に収まりません。

インラインブロックの詳細については、http：//designshack.net/articles/css/whats-the-deal-with-display-inline-block/をご覧ください。

于 2012-08-01T12:28:07.917 に答える
2

switcherDIVの幅が原因で発生しています。

改行を使用してコードを記述すると、DIV間に小さな「空白」が出力されます。また、2つのDIVと「空白」の幅はdivbuttonの幅よりも大きくなります。switcher

こちらをご覧ください

于 2012-08-01T12:34:36.887 に答える
1

これは、それらが同じ行にあるためではなく、2つのDIVの間に空白がないためです。2番目のものを次のように変更します。

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

そしてそれは最初のものと同じように動作します。これはjsfiddleとは何の関係もありません。これは、HTMLが機能する方法です。区切り文字がない場合でも、行が途切れることはありません。

于 2012-08-01T12:29:37.773 に答える