Bagaimana untuk Menjajarkan Label Borang Bersebelahan dengan Input?

Menjajarkan Label Borang Bersebelahan dengan Input

Dalam bidang pembangunan web, selalunya wajar untuk menjajarkan label borang dengan tepat di sebelah medan input sepadannya , memastikan antara muka yang padu dan mesra pengguna. Walau bagaimanapun, mencapai tugas yang kelihatan mudah ini boleh menimbulkan cabaran.

Satu pendekatan untuk penjajaran label melibatkan penetapan lebar tetap untuk elemen label bagi memastikan saiznya yang konsisten merentas semua input borang. Ini boleh dicapai menggunakan lebar sifat CSS. Selain itu, sifat paparan ditetapkan kepada blok sebaris untuk membolehkan label mengalir secara mendatar dalam bekas borang.

Untuk mempertingkatkan lagi penjajaran, sifat penjajaran teks digunakan untuk menjajarkan teks dalam elemen label kepada yang betul. Ini memusatkan teks secara mendatar dalam lebar tetap, memastikan ia diletakkan dengan sempurna di sebelah medan input.

Berikut ialah contoh yang menunjukkan pendekatan ini:

<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 melaksanakan ini teknik, label borang boleh diselaraskan tepat di sebelah medan input, menyediakan pengguna yang lancar dan menarik secara visual pengalaman.

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