Align HTML input fields by :

css html user-interface alignment
Sankar picture Sankar · Jun 3, 2012 · Viewed 257.3k times · Source

I have a HTML form like:

 <html>
  Name:<input type="text"/></br>
  Email Address:<input type="text"/></br>
  Description of the input value:<input type="text"/></br>
 </html>

Now the labels all begin in the same column but the text boxes are beginning in different positions as per the label's text length.

Is there a way to align the input fields such that, all the ":" and the text boxes, will begin in the same position, and the preceding text will be right aligned until the ":" ?

I am okay with using CSS if that can help achieving this.

Answer

DaneSoul picture DaneSoul · Jun 3, 2012

Working JS Fiddle

HTML:

  <div>
      <label>Name:</label><input type="text">
      <label>Email Address:</label><input type = "text">
      <label>Description of the input value:</label><input type="text">
  </div>

CSS:

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: right;
}
input {
  display: inline-block;
  float: left;
}

Related questions

How can I change the thickness of my <hr> tag

I want to change the thickness of my horizontal rule (<hr>)in CSS. I know it can be done in HTML like so - <hr size="10"> But I hear that this is deprecated as mentioned on …

Read More
How do I get rid of an element's offset using CSS?

I've got a positioning problem with some elements, upon inspecting it IE8 Developer tools it shows me this: Now I'm pretty sure my problem is that 12 offset, but how do I remove it? I can't find any mention of a …

Read More
Easiest css for Facebook style "red" notifications

I need a facebook style notification, but getting something that looks nice cross browser seems tricky. For example, different browsers seem to treat paddings differently, resulting in weird looking notifications. What is the best cross-browser way of ensuring the notifications …

Read More