Stan Stan - 2 months ago 13
CSS Question

Align labels in form next to input

I have very basic and known scenario of form where I need to align labels next to inputs correctly. However I don't know how to do it.

My goal would be that labels are aligned next to inputs to the right side. Here is picture example of desired result.

enter image description here

I have made a fiddle for your convenience and to clarify what I have now - http://jsfiddle.net/WX58z/

Snippet:



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




Answer

One possible solution:

  • Give the labels display: inline-block;
  • Give them a fixed width
  • Align text to the right

That is:

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}‚Äč
<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>

JSFiddle

Comments