HTML と CSS で水平メニューを両端揃えするにはどうすればよいですか?

HTML および CSS での水平メニューの位置調整: 総合ガイド

水平メニュー バーは一般的な Web サイト要素ですが、真の位置調整を実現するには挑戦してください。テーブルを使用した従来のアプローチには、最初と最後の項目の位置がずれているなどの制限があります。

位置調整のジレンマ

メニューの位置調整には次のことが伴います。

• 左-最初のメニュー項目を右揃え
• 最後のメニューを右揃えitem
• 残りの項目の最適な間隔

インライン ソリューション

シームレスな解決策は、span 要素を使用して改行を強制することです。この要素は残りのスペースを占有し、最適な間隔を確保します。

実装

このメソッドを実装するには:

1. Set text-align: justify ;メニューコンテナ上で。
2. 表示をインラインに設定します。メニューのすべての直接の子に対して。
3. 表示を設定: inline-block;メニュー項目 (
4. 要素) の場合。
5. 次のスタイルでメニューにスパン要素を追加します:

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

これにより、十分な幅を持つ非表示の要素が作成されます。メニュー構造の整合性を維持しながら、強制的に位置調整を行います。

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