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

Susan Sarandon
Lepaskan: 2024-10-31 09:09:30
asal
350 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!