同じ行でインライン ブロックを水平に整列する

問題

インライン ブロックには、ベースラインの整列や自動センタリングなど、フローティング要素に比べて利点があります。視野が狭くなったとき。ただし、2 つのインライン ブロックを同じ線上で水平に整列させると、問題が発生する可能性があります。

インライン ブロックの整列の課題

• フロートはベースラインの整列を妨げ、不要な回り込みを引き起こす可能性があります。 .
• 相対位置と絶対位置では、float と同様に、間隔の問題が発生する可能性があります。

解決策: テキストの位置揃えを使用する

効果的な解決策の 1 つは、text-align を利用することです。 : 両端揃えテクニック:

CSS コード

.header {
    text-align: justify;
    background: #ccc;
}

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

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

.nav {
    display: inline-block;
    vertical-align: baseline;
}

説明

• 親要素の text-align を「justify」に設定して、テキストを幅全体に均等に配置します。
• 疑似要素 header:after を追加します。インライン ブロック間の残りのスペースを消費します。
• ベースラインを維持するには、インライン ブロック h1 と .nav を表示するように設定します。inline-block とvertical-align: Baseline を設定します。