Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menjajarkan Label Input Borang ke Kanan?

Bagaimana untuk Menjajarkan Label Input Borang ke Kanan?

Linda Hamilton
Lepaskan: 2024-11-06 21:29:02
asal
650 orang telah melayarinya

How to Align Form Input Labels to the Right?

Penjajaran Label Input Borang

Matlamat artikel ini adalah untuk menyediakan penyelesaian untuk menjajarkan label borang di sebelah kanan bersebelahan dengannya input.

Satu penyelesaian yang mungkin melibatkan penetapan lebar tetap untuk elemen label menggunakan sifat lebar dan mendayakan sebaris paparan blok dengan paparan: blok sebaris. Selain itu, menjajarkan teks ke kanan menggunakan text-align: right memastikan label diletakkan dengan tepat.

Berikut ialah coretan kod yang menunjukkan penyelesaian ini:

<code class="css">label {
  display: inline-block;
  width: 140px;
  text-align: right;
}</code>
Salin selepas log masuk
<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>
Salin selepas log masuk

Kaedah ini menyediakan cara mudah untuk menjajarkan label secara konsisten di sebelah input, meningkatkan pengalaman pengguna dan kebolehbacaan borang.

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

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan