How to Align Form Input Labels to the Right?

Form Input Label Alignment

The goal of this article is to provide a solution for aligning form labels on the right side next to their corresponding inputs.

One possible solution involves setting a fixed width for label elements using the width property and enabling inline block display with display: inline-block. Additionally, aligning the text to the right using text-align: right ensures the labels are positioned accurately.

Here is a code snippet demonstrating this solution:

<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 method provides a simple way to align labels consistently next to inputs, enhancing the user experience and readability of forms.

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