Bagaimanakah Anda Mengeluarkan Margin Secara Dinamik daripada Elemen Terakhir dalam Baris?

Pengalihan Dinamik Margin untuk Elemen Terakhir dalam Baris

Masalah: Mengalih keluar jidar daripada elemen terakhir setiap baris dalam senarai, walaupun apabila bilangan elemen setiap baris berubah secara dinamik dengan saiz skrin.

Cabaran: Teknik penyingkiran jidar CSS tradisional, seperti :anak terakhir { margin-kanan: 0 }, hanya menangani yang terakhir elemen senarai.

Penyelesaian:

Pilihan 1: Margin Negatif

Konsep: Gunakan margin negatif kepada induk elemen untuk mengimbangi jidar elemen kanak-kanak.

Contoh:

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

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

Pilihan 2: Pertanyaan Media

Konsep: Gunakan pertanyaan media untuk menyasarkan elemen terakhir dalam setiap baris berdasarkan bilangan elemen setiap baris.

Contoh:

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

Kebaikan:

• Verbose tetapi membenarkan lebih banyak penyesuaian.

Keburukan:

• Memerlukan pengiraan manual dan media pertanyaan untuk setiap senario.

Pilihan: Penyelesaian terbaik bergantung pada keperluan reka bentuk khusus dan fleksibiliti. Margin negatif lebih mudah, manakala pertanyaan media menawarkan lebih kawalan.

Atas ialah kandungan terperinci Bagaimanakah Anda Mengeluarkan Margin Secara Dinamik daripada Elemen Terakhir dalam Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!