Bagaimana untuk Membuat Senarai Benar-Benar Mendatar dalam CSS?

Mencipta Item Senarai Mendatar

Apabila cuba mencipta senarai mendatar, seseorang mungkin menghadapi masalah di mana item senarai tidak dijajarkan secara mendatar. Untuk membetulkan masalah ini, berikut ialah penyelesaian yang dipermudahkan:

Isu:

ul#menuItems li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  height: 50px;
}

Menggunakan paparan: sebaris dan margin auto tidak menghasilkan hasil yang diingini.

Penyelesaian:

ul > li {
    display: inline-block;
}

Oleh menggunakan paparan: blok sebaris kepada item senarai, mereka akan bertindak sebagai blok individu dalam aliran mendatar. Ini memastikan setiap item membungkus kandungannya dan menjajarkan dirinya secara mendatar.

Berikut ialah coretan kod yang dikemas kini:

ul#menuItems {
  background: none;
  height: 50px;
  width: 100px;
  margin: 0;
  padding: 0;
}
ul#menuItems li {
  display: inline-block;
  margin: 0;
  top: 0px;
  height: 50px;
}
ul#menuItems li a {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-weight: bolder;
  color: #000;
  height: 50px;
  width: auto;
  display: block;
  text-align: center;
  line-height: 50px;
}

Atas ialah kandungan terperinci Bagaimana untuk Membuat Senarai Benar-Benar Mendatar dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!