Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencapai Penjajaran Kotak Semak dan Label yang Konsisten Merentasi Pelayar Berbeza?

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

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-22 19:12:11260semak imbas

How Can I Achieve Consistent Checkbox and Label Alignment Across Different Browsers?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn