幅 50% のインラインブロック要素が次の行に折り返されるのはなぜですか?

インライン ブロック要素の 2 行目への改行: 幅と空白について

幅 50% の 2 つのインライン ブロック要素を作成しようとすると、 2 番目の要素が次の行に折り返される問題が発生するとイライラすることがあります。ただし、この動作は inline-block プロパティの結果ではなく、空白管理の結果です。

display:inline-block プロパティを使用すると、要素がインライン要素のように動作できるようになります (同じ要素に表示されます)。線)、幅と高さも定義されています。ただし、インライン要素とは異なり、インライン ブロック要素は幅の計算で空白文字を考慮します。

50% と 49% など、合計幅が 99% の 2 つのインライン ブロック要素の場合、幅の測定には、それらの間の空白が含まれます。その結果、要素は指定された幅内に収まり、並べて表示されます。

一方、要素の幅の合計が 100% の場合、空白も要素の幅に含まれます。計算。 2 番目の要素を収容するための残りのスペースがないため、強制的に次の行に折り返されます。

この問題を解決し、2 番目の要素が壊れるのを防ぐには、inline-block 要素間の空白を使用します。取り外すことができます。空白を削除すると、幅の計算がそれに応じて調整され、両方の要素が同じ行に快適に収まるようになります。

この調整は、親要素の空白プロパティを次のように設定することで CSS を使用して行うことができます。以下の例に示すように、nowrap または none。

#parent-container {
  white-space: nowrap;
}

以上が幅 50% のインラインブロック要素が次の行に折り返されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。