How to Align Form Labels Adjacent to Inputs?

Aligning Form Labels Adjacent to Inputs

In the realm of web development, it's often desirable to align form labels precisely beside their corresponding input fields, ensuring a cohesive and user-friendly interface. However, achieving this seemingly simple task can pose a challenge.

One approach to label alignment involves setting a fixed width for the label elements to ensure their consistent size across all form inputs. This can be accomplished using the CSS property width. Additionally, the display property is set to inline-block to allow the labels to flow horizontally within the form container.

To further enhance alignment, the text-align property is used to align the text within the label elements to the right. This centers the text horizontally within the fixed width, ensuring that it is positioned perfectly next to the input field.

Here's an example demonstrating this approach:

<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 implementing this technique, form labels can be aligned precisely next to input fields, providing a seamless and visually appealing user experience.

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