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

単一行上でインライン ブロックを左右に揃える

インライン ブロックを使用する場合、正確に揃えるのが難しい場合があります単一行で。この記事では、この問題に対する 2 つの解決策を提供します。Flexbox と text-align の位置揃えです。

Flexbox ソリューション

Flexbox は、エレガントで簡潔なソリューションを提供します。 display: flex; を適用することで、親コンテナーと justify-content: space-between; にコピーします。子要素を整列させるには、目的の整列を簡単に実現できます。

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

テキスト整列位置合わせソリューション

テキスト整列整列を使用することも、もう 1 つの実行可能なオプションです。互換性を高めるために、この手法とブラウザ固有のハックを組み合わせた CSS コードの例を次に示します。

<code class="css">.header {
  background: #ccc; 
  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;
}

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

  /* ie 7*/ 
  *display: inline;
  *zoom: 1;
  *text-align: left; 
}

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

  /* ie 7*/
  *display: inline;
  *zoom:1;
  *text-align: right;
}</code>

このアプローチは、IE7 以降を含むさまざまなブラウザでうまく機能します。

覚えておいてください。 inline-block 要素がスペースで区切られていない場合、text-align の位置揃えソリューションが機能しない可能性があります。さらに、親要素のフォント サイズを 0 に設定し、子要素の希望の値にリセットすると、後の疑似要素によって導入された余分なスペースを削除するのに役立ちます。

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