インラインブロック要素がコンテナからオーバーフローしないようにするにはどうすればよいですか?

コンテナをオーバーフローするインライン ブロック ボックスを修正する

インライン ブロック要素を使用すると、それらの間に予期しないスペースがレンダリングされ、問題が発生する可能性があります。コンテナが入っています。この問題は、設定された幅で親コンテナを定義し、その中に複数のインライン ブロック ボックスを収めようとすると顕著になります。

この問題の 1 つの解決策は、 内のインライン ブロック要素間の空白をすべて削除することです。ソースコード

。スペースと改行を削除すると、要素は親コンテナ内にぴったりと収まり、親コンテナの境界内に収まるようになります。

たとえば、次の CSS および HTML コードを考えてみましょう:

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
}

.box {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  border: 2px solid blue;
  height: 100%;
}

<div class="ok">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

この例では、インラインブロック div 間の空白を削除すると、親コンテナー内に完全に収まり、不要なスペースの問題が排除されます。このソリューションを利用すると、インライン ブロック要素が期待どおりに動作し、コンテナ要素内の正確なレイアウト制御が可能になります。

以上がインラインブロック要素がコンテナからオーバーフローしないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。