Bagaimana untuk Mengalih Keluar Margin daripada Elemen Terakhir Berturut-turut Tanpa :last-child?

Mengalih keluar Margin daripada Elemen Terakhir Berturut-turut

Mengalih keluar jidar daripada elemen terakhir berturut-turut ialah cabaran biasa dalam reka bentuk web. Walaupun :last-child boleh digunakan untuk mengalih keluar jidar daripada elemen akhir dalam senarai, pendekatan ini tidak sesuai apabila elemen bersaiz dinamik atau apabila terdapat bilangan elemen yang tidak diketahui bagi setiap baris.

Jing Negatif

Satu penyelesaian ialah menggunakan margin negatif pada elemen induk. Pendekatan ini mewujudkan ilusi bahawa elemen kanak-kanak muat dalam elemen induk sambil mengekalkan jarak antara elemen individu:

<code class="css">ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}</code>

Walau bagaimanapun, teknik ini mungkin memerlukan penggayaan tambahan, seperti limpahan-x: tersembunyi, untuk mengelakkan penatalan mendatar .

Pertanyaan Media

Jika bilangan elemen setiap baris boleh diramal, pertanyaan media boleh digunakan untuk menyasarkan elemen terakhir dalam satu baris menggunakan nth-child(). Pilihan ini lebih bertele-tele daripada jidar negatif tetapi membenarkan kawalan penggayaan yang lebih berbutir:

<code class="css">@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 500px) and (max-width: 599px) {
    li:nth-child(3n+3) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    li:nth-child(4n+4) {
        margin-right: 0;
        border-right: none;
    }
}</code>

Pemilih anak ke-n khusus yang digunakan akan berbeza-beza bergantung pada bilangan elemen setiap baris.

Atas ialah kandungan terperinci Bagaimana untuk Mengalih Keluar Margin daripada Elemen Terakhir Berturut-turut Tanpa :last-child?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!