Mengapa `margin: 0 auto;` Saya Tidak Memusatkan Elemen Saya Dalam Induk Lebar 100%?

Mengapa Memusatkan Elemen dengan "margin: 0 auto;" Dalam 100% Lebar Ibu Bapa Tidak Berfungsi

Perihalan Masalah:

Pertimbangkan senario ini: anda mempunyai div induk dengan lebar ditetapkan kepada 100% dan tidak tertib senarai di dalamnya. Anda telah menggunakan "margin: 0 auto;" ke senarai tidak tersusun untuk memusatkannya, tetapi ia enggan berganjak.

Punca Isu:

Inti isu terletak pada fakta bahawa anda telah menentukan lebar div induk, bukan elemen yang anda cuba pusatkan. Untuk "margin: 0 auto;" untuk berfungsi dengan berkesan, lebar elemen yang dipusatkan mesti ditentukan.

Penyelesaian:

Untuk membetulkan masalah ini, tetapkan lebar pada senarai tidak tertib:

#header ul {
    margin: 0 auto;
    width: 90%;
}

Tambahan Pertimbangan:

Untuk mencapai penampilan yang lebih elegan, pertimbangkan penambahbaikan berikut:

• Alih keluar "float: left;" sifat daripada elemen "li" kerana ia bercanggah dengan "display: inline" dan mencipta penggandaan margin yang tidak diingini dalam IE6 dan penyemak imbas terdahulu.
• Gunakan sifat gaya di bawah terus pada elemen "li":

#header ul li {
    color: #CCCCCC;
    display: inline;
    font-size: 20px;
    padding-right: 20px;
}

Atas ialah kandungan terperinci Mengapa `margin: 0 auto;` Saya Tidak Memusatkan Elemen Saya Dalam Induk Lebar 100%?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!