Bagaimana untuk menyelaraskan kotak pilihan dan labelnya pada pelbagai pelayar menggunakan CSS?-tutorial css-php.cn

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

PHPz

Lepaskan： 2023-08-27 10:49:02

ke hadapan

880 orang telah melayarinya

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>

Salin selepas log masuk

Menggunakan CSS Flexbox Kita boleh menggunakan elemen

sebagai bekas fleksibel untuk menyelaraskan kotak pilihan dan label.

Contoh

Dalam contoh ini, kami menggunakan paparan: flex untuk menjadikan elemen label sebagai bekas fleksibel. Sifat

align-item: center

memusatkan teks label dengan kotak pilihan.

Walaupun kami menggunakan flex: tiada dalam elemen input untuk memastikan lebar kotak pilihan tidak berubah apabila saiz label (bekas) berubah. Pada masa yang sama, menggunakan ketiga-tiga sifat ini membolehkan kotak semak dan label dipusatkan secara mendatar.

<html>
<head>
   <style>
      .container {
         display: flex;
         align-items: center;
         padding: 2px;
      }

      input[type=checkbox] {
         flex: none;
      }
   </style>
</head>
<body>
   <h2> Fruits </h2>
   <div>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> Mango </label>
      <br>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> Banana </label>
   </div>
</body>
</html>

Salin selepas log masuk

Gunakan atribut jajar menegak

Kotak pilihan dijajarkan dengan garis dasar teks label secara lalai dalam beberapa penyemak imbas moden. Walau bagaimanapun, untuk memastikan penjajaran yang betul, kami boleh menetapkan atribut vertical-align kepada

"top"

untuk label dan elemen input.

Contoh Dalam contoh di bawah, kami menggunakan atribut "display: inline-block" untuk memaparkan label (class="container") dan elemen input sebagai elemen blok inline. Ini menjadikan kedua-dua elemen sebaris dan saiznya boleh diubah saiz

"input[type="checkbox"]"

ialah pemilih yang digunakan untuk memilih atau memadankan jenis kotak pilihan elemen input.

Selain itu, kami menggunakan atribut "vertical-align: top"

untuk menjajarkan elemen secara menegak ke bahagian atas bekasnya. Gunakan sifat ini untuk menetapkan kedua-dua label dan elemen input supaya kedua-duanya dijajarkan secara menegak di bahagian atas bekas dan kelihatan sebaris berbanding satu sama lain.

<html>
<head>
   <style>
      .container {
         display: inline-block;
         vertical-align: top;
         margin-right: 15px;
         letter-spacing: 1px;
      }
      input[type="checkbox"] {
         display: inline-block;
         vertical-align: top;
      }
   </style>
</head>
<body>
   <h2> Programming Languages </h2>
   <div>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> JavaScript </label>
      <br>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> Python </label>
   </div>
</body>
</html>

Salin selepas log masuk

Gunakan Kedudukan dan sifat jajar Menegak

Kekalkan atribut posisi elemen input kepada

relatif

dan gunakan atribut

vertical-align: bottom

untuk menjajarkan kotak pilihan dan label juga. Contoh Di sini, kami menjadikan label sebagai elemen peringkat blok supaya ia mengambil lebar penuh bekas. Mengalih keluar

padding

dan

margin

daripada elemen input. Gunakan atribut vertical-align: bottom untuk menjajarkan kotak pilihan secara menegak dengan bahagian bawah bekas. Gunakan atribut position untuk menjajarkan kotak pilihan dengan label.

<html>
<head>
   <style>
      CSS code * {
         padding: 0;
         margin: 0;
      }
      .container {
         display: block;
         padding-left: 20px;
      }
      input {
         width: 17px;
         height: 17px;
         vertical-align: bottom;
         position: relative;
         top: -1px;
      }
   </style>
</head>
<body>
   <h2> Programming Languages </h2>
   <br>
   <div>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> JavaScript </label>
      <br>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> Python </label>
   </div>
</body>
</html>

Salin selepas log masuk

Kesimpulan Borang web ialah komponen asas pembangunan web yang popular digunakan Untuk menjadikannya serasi merentas penyemak imbas, kami harus memastikan penjajaran elemen input dan label harus betul Ini menjadikan tapak web anda kelihatan konsisten dan profesional pada semua penyemak imbas dan peranti .

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!