Bagaimanakah Saya Boleh Mencipta Menu Mendatar Dijajar Sempurna dengan HTML dan CSS?

Mewajarkan Menu Mendatar dengan HTML dan CSS

Dalam membina menu HTML, menjajarkan item menu secara mendatar sering diabaikan. Mencapai penjajaran ini boleh menjadi sangat mencabar, memerlukan gabungan HTML dan CSS yang bijak.

Teka-teki Penjajaran

Beberapa halangan menjadikan penjajaran ini rumit:

• Bilangan item menu yang berbeza-beza memerlukan dinamik penyelesaian.
• Penjajaran hendaklah optimum, dengan item diedarkan sama rata pada bar menu.
• Item pertama dan terakhir hendaklah mengikut penjajaran kiri dan kanan, masing-masing.

Penyelesaian Mudah dan Berkesan

Walaupun rumit, teknik mudah wujud untuk selesaikan isu ini:

1. Buat elemen pemecah baris: Masukkan elemen di hujung baris yang melebihi ruang yang tinggal.
2. Sembunyikan elemen: Gunakan CSS untuk menyembunyikan elemen ini, memastikan ia tidak mengganggu visual reka letak.

Contoh praktikal menggunakan elemen 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>

Pendekatan ini menguatkuasakan pemisah baris, mengagihkan item menu secara sama rata sambil mengekalkan penjajaran optimum.

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