Bagaimana untuk Menjajarkan Label Bersebelahan dengan Input dengan Betul dalam Borang?

Jajarkan Label Bersebelahan Input dengan Betul dalam Borang

Senario biasa dalam reka bentuk borang ialah menjajarkan label dengan betul di sebelah medan inputnya. Untuk mencapai penjajaran ini, pertimbangkan pendekatan berikut:

Tentukan lebar tetap yang sesuai untuk elemen label dan tetapkan ia menggunakan sifat lebar. Tetapkan sifat paparan kepada sekatan sebaris untuk label. Jajarkan teks dalam label ke kanan menggunakan text-align: right.

Berikut ialah contoh coretan kod:

<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>

Pendekatan ini menggunakan lebar tetap, yang mungkin tidak sesuai untuk reka bentuk responsif. Pertimbangkan untuk menggunakan flexbox atau grid CSS untuk penyelesaian yang lebih responsif.

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