Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengeluarkan Margin daripada Elemen Terakhir Berturut-turut Apabila Saiz Baris Berbeza-beza?

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

Susan Sarandon
Susan Sarandonasal
2024-10-31 09:09:30351semak imbas

How to Remove Margins from the Last Element in a Row When Row Size Varies?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn