Bagaimanakah Saya Boleh Mencapai Penjajaran Kotak Semak dan Label yang Konsisten Merentasi Pelayar Berbeza?

Menjajarkan Kotak Semak dan Label Secara Konsisten Merentas Penyemak Imbas

Menjajarkan kotak pilihan dan labelnya dengan betul merentas pelbagai penyemak imbas boleh menjadi tugas yang sukar. Untuk mencapai konsistensi merentas penyemak imbas, adalah penting untuk memahami nuansa enjin pemaparan setiap penyemak imbas.

Dalam HTML standard yang disediakan:

<label><input type="checkbox" /> Label text</label>

Lembaran gaya tetapan semula Eric Meyer biasanya digunakan, meminimumkan penggantian khusus penyemak imbas. Walau bagaimanapun, walaupun terdapat di mana-mana, menyelaraskan kotak pilihan dan label merentas semua penyemak imbas tetap menjadi cabaran.

Penyelesaian Penjajaran Merentas Pelayar

Selepas percubaan yang meluas, penyelesaian telah muncul yang memenuhi keperluan berikut:

• Kotak semak dan label adalah pada baris yang berasingan.
• Penjajaran menegak adalah konsisten merentas penyemak imbas.
• Balut teks label tanpa dilanjutkan di bawah kotak pilihan.

Kod CSS yang digunakan adalah seperti berikut:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

Dengan menetapkan label untuk dipaparkan sebagai blok dan menggunakan padding dan inden teks yang sesuai, konsisten pelabelan tercapai. Elemen input kemudiannya diletakkan dalam label menggunakan penjajaran menegak dan kedudukan relatif, memastikan penjajaran merentas semua penyemak imbas utama.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Penjajaran Kotak Semak dan Label yang Konsisten Merentasi Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!