Bagaimana untuk Mewajarkan Menu Mendatar dalam HTML CSS?

Mewajarkan Menu Mendatar dalam HTML CSS: Panduan Definitif

Mewajarkan bar menu mendatar adalah tugas yang nampak remeh, tetapi mencari yang bersih dan penyelesaian fleksibel yang menyesuaikan diri dengan kandungan yang berbeza-beza adalah mengejutkan mencabar.

Masalahnya

Untuk benar-benar mewajarkan menu, setiap item hendaklah diletakkan sama seperti teks berada pada satu baris. Ini bermakna menjajarkan kiri item pertama, menjajarkan item terakhir ke kanan dan mengagihkan item yang tinggal secara sama rata di antara.

Cabaran

• Menggunakan jadual bermasalah kerana ia tidak menjajarkan item pertama dan terakhir dengan betul apabila sel dipusatkan atau dijajarkan ke kiri/kanan.
• Mengira lebar optimum untuk setiap item menu tidak dapat dilaksanakan kerana bilangan item yang berbeza-beza.

Penyelesaian

Pendekatan yang paling mudah melibatkan pemaksaan pemutusan baris dengan memperkenalkan elemen yang secara visual menduduki ruang yang tinggal dan kemudian bersembunyi ia. Elemen span berfungsi dengan sempurna untuk ini:

HTML

<div>

CSS

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

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

Penyelesaian ini secara berkesan membenarkan item menu tanpa memerlukan pra-pengiraan atau markup tambahan.

Atas ialah kandungan terperinci Bagaimana untuk Mewajarkan Menu Mendatar dalam HTML CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!