Bagaimana untuk Menjajarkan Label Bersebelahan dengan Input dalam Borang?

Menjajarkan Label dalam Borang

Dalam reka bentuk borang, menjajarkan label di sebelah input meningkatkan kebolehbacaan dan interaksi pengguna. Di bawah ialah langkah untuk mencapai penjajaran ini:

1. Tentukan Lebar Label Tetap:

Kira lebar tetap yang sesuai untuk semua elemen label, dengan mengambil kira teks label terpanjang. Tetapkan lebar ini menggunakan sifat lebar CSS.

2. Paparan Inline-Block:

Tugaskan paparan: inline-block to label elements. Ini membolehkan mereka dijajarkan secara mendatar sambil mengekalkan lebar yang ditetapkan.

3. Penjajaran Teks Kanan:

Pastikan penjajaran teks yang betul dengan menetapkan penjajaran teks: tepat untuk label. Ini menjajarkan teks label ke tepi kanan elemen label.

Contoh Pelaksanaan:

<code class="css">label {
  display: inline-block;
  width: 140px;
  text-align: right;
}</code>

<code class="html"><div class="block">
  <label>Simple label</label>
  <input type="text" />
</div>
<div class="block">
  <label>Label with more text</label>
  <input type="text" />
</div>
<div class="block">
  <label>Short</label>
  <input type="text" />
</div></code>

Dengan mengikut langkah ini, label dalam borang boleh diselaraskan dengan betul di sebelah medan input, meningkatkan pengalaman pengguna dan kebolehbacaan.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Label Bersebelahan dengan Input dalam Borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!