How to Align Labels Next to Inputs in Forms?

Aligning Labels in Forms

In form design, aligning labels next to inputs enhances user readability and interaction. Below are steps to achieve this alignment:

1. Determine Fixed Label Width:

Calculate an appropriate fixed width for all label elements, considering the longest label text. Set this width using CSS's width property.

2. Inline-Block Display:

Assign display: inline-block to label elements. This allows them to be aligned horizontally while maintaining their defined width.

3. Right Text Alignment:

Ensure proper text alignment by setting text-align: right for labels. This aligns the label text to the right edge of the label element.

Example Implementation:

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

By following these steps, labels in forms can be correctly aligned next to input fields, improving user experience and readability.

The above is the detailed content of How to Align Labels Next to Inputs in Forms?. For more information, please follow other related articles on the PHP Chinese website!