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

Mendatar Memusatkan Senarai Tidak Tertib Lebar Tidak Diketahui

Dalam pengaki tapak web, adalah perkara biasa untuk mempunyai senarai pautan dipusatkan secara mendatar. Walaupun memusatkan senarai lebar tetap adalah mudah, memusatkan senarai lebar yang tidak diketahui menimbulkan cabaran. Artikel ini meneroka penyelesaian untuk senario ini.

Masalahnya

Pertimbangkan kod HTML berikut:

<code class="HTML"><div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div></code>

Kami mahu keseluruhan kandungan dalam div #footer menjadi berpusat mendatar. Menetapkan penjajaran teks: tengah pada teg perenggan akan berfungsi, tetapi ia tidak boleh digunakan di sini kerana item senarai harus bersebelahan, bukan di bawah satu sama lain.

Penyelesaian

Penyelesaian untuk Senarai dengan Item Sebaris:

Jika item senarai boleh dipaparkan sebaris, CSS berikut sudah memadai:

<code class="CSS">#footer {
    text-align: center;
}

#footer ul {
    list-style: none;
}

#footer ul li {
    display: inline;
}</code>

Penyelesaian untuk Senarai dengan Item Sekat:

Jika item senarai mesti mempunyai paparan: blok, CSS yang lebih kompleks 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>

Penyelesaian ini menggunakan sifat terapung dan kiri dan kanan untuk melaraskan kedudukan senarai dan itemnya dengan sewajarnya, memastikan pemusatan mendatar tanpa mengira lebar senarai yang tidak diketahui.

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