Bagaimanakah Saya Boleh Mewajarkan Menu Teks Sahaja Mendatar dengan Sempurna dalam HTML dan CSS?

Mewajarkan Menu Mendatar dalam HTML CSS: Penyelesaian Komprehensif

Walaupun terdapat banyak tutorial pada bar menu dalam HTML, mencapai justifikasi optimum untuk menu teks sahaja tetap menjadi cabaran . Artikel ini akan membentangkan penyelesaian teguh yang memastikan penjajaran yang betul, jarak optimum dan fleksibiliti untuk pengiraan item menu yang berbeza-beza.

Memahami Masalah

Matlamatnya adalah untuk mencipta menu mendatar di mana:

• Item pertama dijajar kiri
• Item terakhir ialah dijajarkan ke kanan
• Item selebihnya diagihkan sama rata di seluruh bar menu
• Penyelesaian harus berfungsi dengan bilangan item yang berbeza-beza tanpa mengira lebar optimum terlebih dahulu

The Invisible Span Pengembangan

Kunci untuk mencapai justifikasi ini adalah dengan memasukkan elemen halimunan pada hujung menu yang memaksa pemutusan baris. Dengan menyembunyikan elemen ini secara strategik, kami boleh mencipta ruang yang diperlukan untuk pengedaran item yang optimum.

Berikut ialah kod CSS dan HTML yang optimum:

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

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

<div>

Cara Ia Berfungsi

1. #menu menetapkan justifikasi untuk keseluruhan menu.
2. #menu * memastikan semua kanak-kanak elemen sebaris.
3. #menu li menjadikan item menu sebaris-blok, membenarkannya mengalir secara mendatar.
4. Span tersembunyi (#span menu) mengembang untuk mengisi ruang yang tinggal, memaksa pemutusan baris dan membuat menu mewajarkan dengan betul.

Penyelesaian ini menyediakan cara yang elegan dan berkesan untuk mencipta menu mendatar yang dibenarkan dalam HTML CSS, memastikan jarak dan penjajaran optimum tanpa mengira bilangan item menu.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mewajarkan Menu Teks Sahaja Mendatar dengan Sempurna dalam HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!