HTML と CSS を使用して完全に整列した水平メニューを作成するにはどうすればよいですか?

HTML と CSS を使用した水平方向のメニューの位置合わせ

HTML メニューを構築する際、メニュー項目の水平方向の位置合わせは見落とされがちです。この位置合わせを実現することは、HTML と CSS の賢明な組み合わせが必要となるため、驚くほど難しい場合があります。

位置合わせの難題

いくつかのハードルにより、この位置合わせは複雑になります。

• メニュー項目の数が異なるため、動的なメニューが必要になります
• 項目はメニュー バー全体に均等に配置され、配置は最適である必要があります。
• 最初と最後の項目はそれぞれ左と右の配置に従う必要があります。

シンプルで効果的なソリューション

複雑さにもかかわらず、シンプルなテクニックが存在します。この問題を解決するには:

1. 改行要素を作成します: 残りのスペースを超える要素を行末に挿入します。
2. element: CSS を使用してこの要素を非表示にし、視覚的に邪魔にならないようにします。レイアウト。

span 要素を使用した実際の例:

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

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

<div>

このアプローチでは改行が強制され、最適な配置を維持しながらメニュー項目を効果的に均等に分散します。

以上がHTML と CSS を使用して完全に整列した水平メニューを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。