インラインブロックを同じ行の左右に揃えるにはどうすればよいですか?

インライン ブロックを同一線上で左右に配置する

インライン ブロックを適切に配置するのは難しい場合があります。この問題は、2 つのインライン ブロック (1 つは左側、もう 1 つは右側) を 1 つの行に配置しようとすると発生します。

ただし、この苦境に対処できる解決策はいくつかあります。 float の使用は、ベースラインの位置合わせを維持したりウィンドウのサイズ変更に対応したりするには理想的ではないかもしれませんが、他の手法により柔軟性が高まります。

効率的な位置合わせのための Flexbox の使用

最新のブラウザではサポートが提供されています。フレックスボックス用。位置合わせに対する簡潔で適応性のあるアプローチを提供します。 display: flex を親コンテナに割り当て、justify-content: space-between をその子コンテナに割り当てることで、それらを同じ行に保ちながら効果的に間隔をあけることができます。

.header {
    display: flex;
    justify-content: space-between;
}

Text-Align Justify 手法

フレックスボックスがサポートされていない場合は、text-align: justify 手法の採用を検討してください。この手法では、単語と行の間に空白が均等に分散され、ワー​​ド プロセッサの両端揃えテキストと同様の効果が得られます。

.header {
    text-align: justify;
}

.header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

ただし、この手法では、「スター ハック」が行われる IE7 以前などのブラウザでは追加の考慮事項が必要です。

空白アーティファクトのアドレス指定

場合によっては、インラインブロックによって不要な空白が導入され、配置に影響を与える可能性があります。この問題を解決するには、親要素のフォント サイズを 0 に設定し、子要素のフォント サイズを目的の値にリセットします。このアプローチは、text-align: justify メソッドで使用される疑似要素によって作成される追加のギャップを効果的に排除します。

以上がインラインブロックを同じ行の左右に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。