Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menyelaraskan kotak pilihan dan labelnya pada pelbagai pelayar menggunakan CSS?

Bagaimana untuk menyelaraskan kotak pilihan dan labelnya pada pelbagai pelayar menggunakan CSS?

PHPz
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.

Bagaimana untuk menyelaraskan kotak pilihan dan labelnya pada pelbagai pelayar menggunakan CSS?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 menegak Menggunakan 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.

<html>
<head>
   <style>
      input[type="checkbox"] {
         display: inline-block;
         vertical-align: middle;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h2> Checkbox </h2>
   <div class="container">
      <label for="demo">
      <input type="checkbox" id="demo"> Option 1 </label>
      <br>
      <label for="demo">
      <input type="checkbox" id="demo"> Option 2 </label>
   </div>
</body>
</html>
Menggunakan CSS Flexbox Kita 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!

Kenyataan:
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam