ホームページ > 記事 > ウェブフロントエンド > 2 つのインライン ブロック要素を同じ行の左右に揃えるにはどうすればよいですか?
同じ行上で 2 つのインライン ブロックを左右に揃える
現代の Web 開発では、2 つのインライン ブロック要素を左右に揃えます同じ行での作業は、一見複雑なタスクに見える場合があります。ただし、適切な手法を使用すると、アプローチを簡素化できます。
Flexbox
Flexbox は、簡単なソリューションを提供します。親コンテナにdisplay:flexを、子コンテナにjustify-content:space-betweenを適用することで、コンテナの両端に要素を等間隔で配置することができます。これは次のように簡単に実装できます。
<code class="css">.header { display: flex; justify-content: space-between; }</code>
Text-Align: Justify
別の手法では、親要素で text-align: justify を利用します。ただし、古いブラウザとの互換性を確保するには、追加のハックが必要です:
<code class="css">.header { text-align: justify; /* IE 7 */ *width: 100%; *-ms-text-justify: distribute-all-lines; *text-justify: distribute-all-lines; } .header:after { content: ''; display: inline-block; width: 100%; height: 0; font-size: 0; line-height: 0; }</code>
:after 疑似要素で余分なスペースが挿入されるのを防ぐために、次のトリックを使用できます:
<code class="css">.header { font-size: 0; } h1, .nav { font-size: 14px; }</code>
親要素のフォントサイズを 0 に設定し、子要素のフォントサイズをリセットすることで、問題を解決できます。
以上が2 つのインライン ブロック要素を同じ行の左右に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。