Bagaimana untuk Memusatkan Senarai Secara Mendatar Dalam Div?

Cara Memusatkan Senarai dalam Div

Selalunya wajar untuk memusatkan senarai item dalam div lebar tetap. Ini boleh dicapai melalui gabungan teknik HTML dan CSS.

Penyelesaian:

Untuk memusatkan senarai dan elemen anaknya, kami menggunakan langkah berikut:

1. Balut senarai dalam div dengan text-align: center;.
2. Tetapkan paparan: blok sebaris; pada senarai untuk memusatkannya dalam div.
3. Tetapkan margin dan padding yang sesuai pada senarai dan elemennya untuk mencapai yang diingini jarak.

Kod:

<div class="wrapper">
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
    </ul>
</div>

.wrapper {
    text-align: center;
}

.wrapper ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.wrapper li {
    float: left;
    padding: 2px 5px;
    border: 1px solid black;
}

Penjelasan:

• Pembungkus div memusatkan senarai secara mendatar.
• Paparan blok sebaris pada senarai meletakkannya dalam div secara mendatar juga.
• Jingar dan pelapik pada senarai dan item senarai melaraskan jarak dan penampilan elemen.

Dengan mengikuti langkah ini, anda boleh memusatkan dengan berkesan senarai dalam div, memastikan reka letak yang seimbang dan menarik secara visual.

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