Bagaimana untuk Memusatkan Senarai Tidak Tertib Lebar Tidak Diketahui dalam CSS?

Memusatkan Senarai Tidak Tertib Lebar Tidak Diketahui

Dalam reka bentuk web, adalah perkara biasa untuk mempunyai senarai pautan tidak tertib dalam pengaki untuk navigasi yang mudah. Walau bagaimanapun, jika lebar senarai tidak diketahui, mungkin sukar untuk mendatar memusatkan item senarai.

Satu penyelesaian untuk senarai di mana item boleh dipaparkan sebaris ialah:

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

Ini menggunakan pusat penjajaran teks pada pengaki, mengalih keluar penggayaan senarai lalai dan menetapkan item senarai untuk dipaparkan sebagai elemen sebaris.

Walau bagaimanapun, dalam kes di mana item senarai mesti dipaparkan sebagai blok, kod CSS berikut boleh digunakan:

<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>

Pendekatan ini menetapkan pengaki kepada lebar penuh dan menyembunyikan sebarang limpahan. Senarai tidak tertib diletakkan secara mutlak, terapung ke kiri, dan kemudian dialihkan 50% ke kiri. Item senarai juga diletakkan secara mutlak, terapung ke kiri, dan dialihkan 50% ke kanan. Ini berkesan memusatkan senarai tidak tertib secara mendatar, tanpa mengira lebarnya.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Senarai Tidak Tertib Lebar Tidak Diketahui dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!