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 サイトの他の関連記事を参照してください。