インラインブロックを同じ行に揃える方法: フレックスボックスとテキストの位置合わせ?

インライン ブロックを同じ行に揃える: 包括的なソリューション

インライン ブロックを同じ行に揃えるのは難しい場合がありますが、利用できる効果的なソリューションがあります。一般的に使用される 2 つのアプローチを詳しく見てみましょう。

オプション 1: フレックスボックス

フレックスボックスは、目的の位置合わせを実現する簡単かつ柔軟な方法を提供します。 display: flex; を適用することで、親コンテナに対して、justify-content: space-between; を使用して子の配置を操作できます。このアプローチは、優れたブラウザー間互換性を提供します。

<code class="css">.header {
  display: flex;
  justify-content: space-between;
}</code>

オプション 2: テキストの位置調整

より幅広いブラウザーをサポートするには、text-align: justify テクニックとスターハックを利用できます。 Internet Explorer の古いバージョン。

<code class="css">.header {
  background: #ccc;
  text-align: justify;
}

.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;
}</code>

このメソッドは、:after 疑似要素を使用して空の要素を追加することで、インライン ブロック要素間の分離がない問題に対処します:

<code class="css">.header:after {
  content: '';
  display: inline-block;
  width: 100%;
  ...
}</code>

To :after 疑似要素によって生じる余分なスペースを削除し、親要素の font-size を 0 に設定し、子要素の希望の値にリセットします:

<code class="css">.header {
  font-size: 0;
}

h1, .nav {
  font-size: 14px;
}</code>

以上がインラインブロックを同じ行に揃える方法: フレックスボックスとテキストの位置合わせ?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。