Mengapa Item Senarai Mendatar Saya Tidak Menjajar Dengan Betul, dan Bagaimana Saya Boleh Membetulkannya?

Penyelesaian Pemformatan Senarai Mendatar

Senarai item mendatar ialah elemen reka bentuk web yang biasa, tetapi memformatkannya mungkin mencabar. Seorang pengguna menghadapi masalah dengan senarai mendatar tidak dijajarkan dengan betul walaupun terdapat percubaan seperti menetapkan 'terapung' ke kiri.

Sampel kod yang disediakan menunjukkan penanda dan gaya yang digunakan untuk senarai mendatar:

ul#menuItems {
  ...
}
ul#menuItems li {
  display: inline;
  ...
}
ul#menuItems li a {
  ...
}

<ul>

Isu ini berpunca daripada penggunaan paparan: sebaris pada item senarai. Walaupun kaedah ini menjajarkan item senarai secara mendatar, kaedah ini juga mengalih keluar ruang antara mereka. Untuk menyelesaikan masalah ini, kod harus dikemas kini untuk menggunakan paparan: blok sebaris untuk item senarai:

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
}

Dengan pengubahsuaian ini, item senarai akan dipaparkan secara mendatar dengan jarak yang dikehendaki. Kod HTML yang dikemas kini berikut juga akan berfungsi:

<ul>
    
 some item

    
    
 another item

    

Atas ialah kandungan terperinci Mengapa Item Senarai Mendatar Saya Tidak Menjajar Dengan Betul, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!