インラインブロックを同じ行に水平に配置するにはどうすればよいですか?

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

問題

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

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

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

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

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

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 : ベースラインを維持するためのベースライン。

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