HTML と CSS で横書きのテキストのみのメニューを完全に両端揃えするにはどうすればよいですか?

HTML CSS での水平メニューの位置調整: 包括的なソリューション

HTML のメニュー バーに関するチュートリアルは豊富にありますが、テキストのみのメニューの最適な位置調整を実現することは依然として課題です。この記事では、さまざまなメニュー項目数に対する適切な配置、最適な間隔、および柔軟性を保証する堅牢なソリューションを紹介します。

問題を理解する

目標は、次のような水平メニューを作成することです。

• 最初の項目は左揃えです
• 最後の項目は右揃え
• 残りの項目はメニュー バー全体に均等に配置されます
• ソリューションは、最適な幅を事前に計算せずに、さまざまな数の項目で機能するはずです

The Invisible展開スパン

この位置調整を達成するための鍵は、メニューの最後に非表示の要素を挿入することです。強制的に改行させます。この要素を戦略的に非表示にすることで、最適なアイテム配布に必要なスペースを作成できます。

最適な CSS と HTML コードは次のとおりです:

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

<div>

仕組み

1. #menu はメニュー全体の位置揃えを設定します。
2. #menu * は確実に行いますすべての子はインライン要素です。
3. #menu li はメニュー項目をインラインブロックにし、水平方向にフローできるようにします。
4. 非表示のスパン (#menu スパン) は残りのスペースを埋めるために拡張され、強制的に拡張されます。

このソリューションは、HTML CSS で両端揃えの水平メニューを作成するエレガントで効果的な方法を提供します。メニュー項目の数に関係なく、最適な間隔と配置を確保します。

以上がHTML と CSS で横書きのテキストのみのメニューを完全に両端揃えするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。