Bagaimana untuk Mengalih Keluar Margin Lajur Terakhir Tanpa Mengetahui Kiraan Baris?

Penyingkiran Margin Lajur Terakhir Tanpa Pengetahuan Kiraan Baris

Dalam reka bentuk web, selalunya wajar untuk mengalih keluar jidar yang betul untuk setiap elemen terakhir dalam sebaris. Tugasan ini menjadi mencabar apabila berurusan dengan panjang baris dinamik, di mana bilangan elemen setiap baris tidak boleh ditentukan terlebih dahulu.

Jing Negatif

Satu helah untuk mencapai kesan ini ialah dengan tambahkan margin negatif pada bekas induk. Ini mewujudkan ilusi bahawa elemen kanak-kanak diselaraskan dengan sempurna dalam induk, sambil mengekalkan jarak yang diingini di antara mereka:

ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}

Memandangkan margin-kiri dan margin-kanan digunakan secara sama, ia boleh menampung kedua-dua LTR (kiri -ke-kanan) dan kedudukan elemen RTL (kanan-ke-kiri). Walau bagaimanapun, ia mungkin memerlukan penambahan limpahan-x: tersembunyi untuk mengelakkan penatalan mendatar.

Pertanyaan Media

Penyelesaian alternatif melibatkan penggunaan pertanyaan media untuk menyasarkan elemen terakhir dalam setiap barisan. Pendekatan ini kurang ringkas berbanding menggunakan margin negatif tetapi memberikan kawalan yang lebih besar ke atas pelarasan penggayaan:

@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}
/* ... */

Dengan menentukan pertanyaan media untuk saiz skrin yang berbeza, adalah mungkin untuk menentukan penggayaan elemen terakhir untuk pelbagai panjang baris.

Atas ialah kandungan terperinci Bagaimana untuk Mengalih Keluar Margin Lajur Terakhir Tanpa Mengetahui Kiraan Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!