Bagaimana untuk menyelaraskan kotak pilihan dan labelnya pada pelbagai pelayar menggunakan CSS?
PHPzke hadapan
2023-08-27 10:49:02909semak imbas
Borang Web digunakan secara umum di laman web moden. penyemak imbas dan peranti yang berbeza Apabila ia datang untuk memaparkan kotak pilihan, penyemak imbas yang berbeza mungkin mempunyai gaya dan kaedah pemaparan yang berbeza Untuk menyelesaikan masalah ini, kami akan membincangkan cara yang berbeza untuk menyelaraskan kotak pilihan bersama-sama dengan label mereka menggunakan CSS pada penyemak imbas silang.
Bagaimanakah kotak pilihan dipaparkan dalam pelayar yang berbeza?
Pelayar yang berbeza mempunyai keserasian yang berbeza untuk kotak pilihan dalam borang web. Dalam Internet Explorer, kemunculan kotak pilihan bergantung pada versi. Versi lama tidak menyokong ciri CSS terkini, menjadikannya sukar untuk menyelaraskan kotak pilihan dan labelnya. Perkara yang sama berlaku untuk versi Mozilla Firefox dan Safari.
Oleh itu, untuk memastikan paparan yang konsisten dan penjajaran kotak pilihan dan label yang betul, kami mesti menggunakan teknik keserasian merentas pelayar dalam CSS.
Nota
− Semasa membuat borang web, secara amnya adalah amalan yang baik untuk menggunakan atribut
for
dengan sebarang jenis elemen input. Ini memastikan bahawa kotak semak dan labelnya diselaraskan. Sentiasa pastikan bahawa nilai atribut adalah sama dengan nilai atribut id bagi . Kami mempunyai beberapa teknik dan amalan CSS untuk memastikan penjajaran kotak pilihan dan label yang betul pada platform yang berbeza. Sebahagian daripada ini dibincangkan di bawah. Gayakan kotak pilihan menggunakan jajar menegakMenggunakan atribut paparan dan penjajaran menegak, kami boleh menjajarkan kotak pilihan dan labelnya.
Contoh
Di sini, atribut
"display: inline-block"
membolehkan kami menetapkan jenis paparan kotak pilihan kepada inline-block. Dan atribut
“vertical-align: middle”
akan menjajarkan kotak pilihan secara menegak ke tengah bekasnya.
Menggunakan kedua-dua sifat ini bersama-sama akan memastikan bahawa kotak pilihan muncul pada baris yang sama dengan elemen lain, dijajarkan di tengah-tengah garisan. Oleh itu, kotak semak dan labelnya akan dijajarkan pada baris yang sama, meninggalkan teks label berpusat dengan kotak pilihan.
Menggunakan CSS FlexboxKita boleh menggunakan elemen
Atas ialah kandungan terperinci Bagaimana untuk menyelaraskan kotak pilihan dan labelnya pada pelbagai pelayar menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!