How to Align Labels Next to Inputs Correctly in a Form?

Align Labels Next to Inputs Correctly in a Form

A common scenario in form design is aligning labels correctly next to their input fields. To achieve this alignment, consider the following approach:

Determine a suitable fixed width for label elements and assign it using the width property. Set the display property to inline-block for labels. Align the text within labels to the right using text-align: right.

Here's an example code snippet:

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

This approach uses fixed widths, which may not be ideal for responsive designs. Consider using flexbox or CSS grid for a more responsive solution.

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