Bagaimana dengan elegan menyelesaikan masalah jarak yang terlalu kecil dari tag span selepas rehat garis?

Cara mengendalikan jarak tag span dengan elegan selepas garis baru

Dalam susun atur laman web, anda sering menghadapi situasi di mana beberapa tag span perlu diatur secara mendatar, seperti memaparkan sejarah carian. Apabila terlalu banyak tag span membawa kepada barisan baru, bagaimana untuk mengelakkan kandungan baris kedua dan pertama yang berkait rapat sambil mengelakkan jarak tambahan yang tidak perlu adalah masalah biasa. Artikel ini akan menangani isu ini dan meneroka cara mengendalikan jarak tag span dengan anggun selepas baru menggunakan CSS atau JavaScript.

Dalam penerangan masalah, pemaju menggunakan satu set tag span untuk memaparkan sejarah carian, dan hanya atribut margin-kiri ditetapkan antara setiap tag span. Apabila terlalu banyak kandungan tag span menyebabkan rehat garis, label baris kedua akan melekat pada label baris pertama, yang mempengaruhi kecantikan. Pemaju berharap dapat mencari cara untuk menambah atribut margin-atas secara automatik apabila tag span dibalut, sambil mengelakkan mempengaruhi keharmonian susun atur keseluruhan. Hanya menambah margin-atas atau margin-bottom akan menyebabkan jarak yang terlalu besar dan turun, yang bertentangan dengan gaya bekas luar.

Inti penyelesaiannya adalah untuk mengelakkan secara langsung menambahkan jarak menegak ke label SPAN. Penyelesaian yang mudah adalah secara langsung menambah atribut margin-bawah ke tag span pada baris kedua dan kemudian. Kelebihan melakukan ini adalah bahawa ia adalah mudah dan langsung, dan dapat menyelesaikan masalah kedekatan dengan berkesan.

Cara lain ialah menukar harta margin-kiri ke harta margin-kanan. Ini secara berkesan boleh mengelakkan isu pemecahan garis, tetapi perlu diperhatikan bahawa jika lebar tag span terakhir ditambah margin-kanan melebihi lebar kontena, pemecahan garis masih akan berlaku.

Penyelesaian yang lebih baik adalah mengamalkan susun atur flex. Susun atur Flex menyediakan harta jurang yang membolehkan penetapan jarak yang mudah di antara kanak -kanak tanpa menambahkan atribut margin secara manual untuk setiap tag span. Gunakan atribut GAP untuk mengawal jarak dalam arah mendatar dan menegak, menjadikan kod lebih mudah untuk mengekalkan dan memahami, dan untuk menyesuaikan diri dengan perubahan susun atur yang lebih baik di bawah saiz skrin yang berbeza. Ini akan menjadi lebih elegan dan cekap daripada menambahkan margin-atas atau margin-bawah secara manual.

Atas ialah kandungan terperinci Bagaimana dengan elegan menyelesaikan masalah jarak yang terlalu kecil dari tag span selepas rehat garis?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!