Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memusatkan Senarai Tidak Tertib Lebar Tidak Diketahui Secara Mendatar?

Bagaimana untuk Memusatkan Senarai Tidak Tertib Lebar Tidak Diketahui Secara Mendatar?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-10-29 02:46:02455semak imbas

How to Center an Unordered List of Unknown Width Horizontally?

Memusatkan Senarai Tidak Tertib Lebar Tidak Diketahui Secara Mendatar

Apabila mencipta pengaki dengan set pautan yang diwakili sebagai senarai tidak tertib, ia selalunya wajar untuk memusatkan senarai secara mendatar dalam div pengaki. Walaupun mudah untuk memusatkan elemen teks atau elemen dengan lebar yang diketahui, memusatkan senarai tidak tertib lebar yang tidak diketahui memberikan cabaran.

Item Senarai Sebaris

Jika item senarai boleh dipaparkan sebaris, penyelesaiannya mudah:

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

Item Senarai Sekat

Walau bagaimanapun, dalam kes tertentu, mungkin perlu menggunakan paparan: blok; pada item senarai. Dalam kes ini, penyelesaian yang lebih kompleks sedikit diperlukan:

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

CSS ini meletakkan senarai tidak tertib di tengah-tengah div pengaki dan mengimbangi item senarai supaya ia sejajar secara mendatar dalam senarai.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn