0

次の2つのHTMLマークアップブロックがあるとします。

<div style="overflow:auto; line-height:22px;">
  <div style="float:left; display:inline;">Write</div>
  <div style="float:left; display:inline; font-size:20px;">on the</div>
  <div style="float:left; display:inline; font-size:20px;">same line</div>
</div>

<div style="line-height:22px;">
  <span>Write</span>
  <span style="font-size:20px;">on the</span>
  <span style="font-size:20px;">same line</span>
</div>

なぜ同じものが異なって表示されるのですか？スパンはインライン要素ですが、テキスト「書き込み」は、divがインラインとして表示されているかどうかに関係なく、「上」および「同じ行」とは異なる方向に整列します。まったく同じ方法で線をレンダリングするべきではありませんか？

4

1 に答える 1

5

あなたのdivは浮かんでいます。フローティングの場合、インラインにすることはできません。

フロートを削除すると（その後、overflow: auto親上では必要ないため）、フロートはインライン要素のように動作します。

<div style="line-height:22px;">
  <div style="display:inline;">Write</div>
  <div style="display:inline; font-size:20px;">on the</div>
  <div style="display:inline; font-size:20px;">same line</div>
</div>
于 2012-12-11T01:22:26.030 に答える