Bagaimana untuk mengalih keluar Margin daripada Elemen Terakhir dalam Baris Dinamik dalam CSS?

Mengalih keluar Margin daripada Elemen Terakhir dalam Baris

Dalam CSS, mengalih keluar jidar daripada elemen tertentu dalam satu baris boleh menjadi mencabar, terutamanya apabila bilangan elemen dalam setiap baris adalah dinamik dan tidak diketahui. Walau bagaimanapun, terdapat teknik untuk mencapai kesan ini.

Margin Negatif

Satu penyelesaian ialah menggunakan margin negatif pada elemen induk. Ini mencipta ilusi optik dengan menolak elemen kanak-kanak secara visual ke dalam induk, menghapuskan jarak antara elemen tersebut.

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

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

Pertanyaan Media

Jika anda boleh meramalkan bilangan elemen dalam setiap baris, anda boleh menggunakan pertanyaan media dan pemilih nth-child() untuk menyasarkan elemen terakhir dalam setiap baris. Ini membolehkan pelarasan gaya yang lebih berbutir:

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

Walaupun kaedah ini lebih bertele-tele, ia menawarkan fleksibiliti yang lebih besar dalam menggayakan elemen khusus dalam setiap baris.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar Margin daripada Elemen Terakhir dalam Baris Dinamik dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!