Bagaimana untuk Memusatkan Senarai Tidak Tertib Secara Mendatar dengan Lebar Boleh Ubah?

Penjajaran Mendatar Senarai Tidak Tertib dengan Lebar Tidak Diketahui

Dalam pengaki tapak web, adalah perkara biasa untuk mempunyai senarai pautan untuk navigasi diwakili sebagai senarai tidak teratur. Untuk memastikan pemusatan mendatar tanpa mengira lebar senarai, kaedah konvensional menetapkan lebar tetap pada elemen UL selalunya tidak praktikal.

Penyelesaian untuk Item Senarai Sebaris

Jika item senarai boleh dipaparkan sebaris, penyelesaiannya adalah mudah:

<code class="css">#footer {
  text-align: center;
}
#footer ul {
  list-style: none;
}
#footer ul li {
  display: inline;
}</code>

Walau bagaimanapun, apabila item senarai mesti dipaparkan sebagai blok, CSS berikut terbukti berkesan:

<code class="css">#footer {
  width: 100%;
  overflow: hidden;
}
#footer ul {
  list-style: none;
  position: relative;
  float: left;
  display: block;
  left: 50%;
}
#footer ul li {
  position: relative;
  float: left;
  display: block;
  right: 50%;
}</code>

Kedudukan CSS ini elemen UL di tengah halaman dan menetapkan elemen LI untuk terapung di sekelilingnya, dengan itu mencapai penjajaran mendatar yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Senarai Tidak Tertib Secara Mendatar dengan Lebar Boleh Ubah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!