Bagaimana untuk Mengeluarkan Margin daripada Elemen Terakhir Berturut-turut Apabila Saiz Baris Berbeza-beza?

Cara Mengeluarkan Margin daripada Elemen Terakhir Berturut-turut (Tidak Kira Saiz Baris)

Dalam situasi di mana anda mempunyai berbilang elemen dalam satu baris , dan bilangan elemen setiap baris mungkin berbeza-beza secara dinamik, mengalih keluar jidar daripada elemen terakhir dalam setiap baris boleh mencabar menggunakan CSS tulen.

Menggunakan Margin Negatif

Satu teknik yang berkesan ialah menggunakan margin negatif pada elemen induk. Ini mewujudkan ilusi bahawa elemen kanak-kanak sesuai dengan sempurna dalam induk sambil mengekalkan jarak antara mereka.

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

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

Dengan membelah jidar dan menerapkannya pada kedua-dua belah, anda boleh mencapai hasil yang lebih baik, terutamanya untuk reka bentuk yang memerlukan keserasian dengan kedua-dua orientasi kiri-ke-kanan (LTR) dan kanan-ke-kiri (RTL).

Menggunakan Pertanyaan Media

Pendekatan lain, jika anda boleh meramalkan bilangan elemen setiap baris dalam saiz skrin tertentu, adalah menggunakan pertanyaan media untuk menyasarkan elemen terakhir dalam baris menggunakan nth-child(). Kaedah ini membolehkan pelarasan penggayaan yang lebih khusus:

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

/* Add more media queries as needed... */</code>

Atas ialah kandungan terperinci Bagaimana untuk Mengeluarkan Margin daripada Elemen Terakhir Berturut-turut Apabila Saiz Baris Berbeza-beza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!