66

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.

stanleyxu2005
  • 8,081
  • 14
  • 59
  • 94
Sankar
  • 6,192
  • 12
  • 65
  • 89

7 Answers7

107

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;
}
DaneSoul
  • 4,491
  • 3
  • 21
  • 37
  • 4
    Is there a way to do that without having to specify an absolute width? – Ajedi32 Oct 28 '13 at 01:21
  • 1
    Ajedi32, You can use relative width (%), look here: http://jsfiddle.net/T6zhj/293/ . But you need to setup same width for all labels in some way, because you need to align them to right. – DaneSoul Oct 28 '13 at 17:19
  • vscode say this. And when I remove the display in both label and input it seem to be true. "inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'css(propertyIgnoredDueToDisplay)" – Griffin May 04 '22 at 07:23
26

You could use a label (see JsFiddle)

CSS

label { display: inline-block; width: 210px; text-align: right; }

HTML

<html> 
    <label for="name">Name:</label><input id="name" type="text"><br />
    <label for="email">Email Address:</label><input id="email" type="text"><br /> 
    <label for="desc">Description of the input value:</label><input id="desc" type="text"><br /> 
 </html>

Or you could use those labels in a table (JsFiddle)

<html>
    <table>
        <tbody>
            <tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
            <tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
            <tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
        </tbody>
    </table>
 </html>
huysentruitw
  • 27,376
  • 9
  • 90
  • 133
  • 1
    Plus, by using `label` you'll get all sorts of nice accessibility features: you can click to jump to the associated control and screen readers will be able to make sense of your form. `table`s for layout will get you none of that. – Mattias Buelens Jun 03 '12 at 07:55
  • 4
    @MattiasBuelens: but a table will adopt the first column to the width of the labels. F.e. for a multilingual site, where you get the label caption dynamically, you could set the td's in the first column to nowrap... So don't drop tables yet, they have their use – huysentruitw Jun 03 '12 at 07:58
  • @wouterHuysentruit This is what I am looking for, but there are no spaces between the fields in the CSS example. How can this be fixed? – Brian Oct 16 '14 at 21:02
  • define a 'margin' on the input fields – huysentruitw Oct 17 '14 at 08:02
6

http://jsfiddle.net/T6zhj/1/

Using display table-cell/row will do the job without any width needed.

The html :

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

The Css :

label{
    display: table-cell;
    text-align: right;
}
input {
  display: table-cell;
}
div.row{
    display:table-row;
}
vonwa
  • 61
  • 1
  • 2
3

Set a width on the form element (which should exist in your example! ) and float (and clear) the input elements. Also, drop the br elements.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
1

in my case i always put these stuffs in a p tag like

<p> name : < input type=text /> </p>

and so on and then applying the css like

p {
  text-align:left;
}

p input {
  float:right;
}

You need to specify the width of the p tag.because the input tags will float all the way right.

This css will also affect the submit button. You need to override the rule for this tag.

Loopo
  • 2,204
  • 2
  • 28
  • 45
maksbd19
  • 3,785
  • 28
  • 37
1

I know that this approach has been taken before, But I believe that using tables, the layout can be generated easily, Though this may not be the best practice.

JSFiddle

HTML

<table>

    <tr><td>Name:</td><td><input type="text"/></td></tr>

    <tr><td>Age:</td><td><input type="text"/></td></tr>

</table>

<!--You can add the fields as you want-->

CSS

td{
    text-align:right;
}
IcyFlame
  • 5,059
  • 21
  • 50
  • 74
0

I have just given width to Label and input type were aligned automatically.

input[type="text"] {
    width:100px;
 height:30px;
 border-radius:5px;
 background-color: lightblue;
 margin-left:2px;
  position:relative;
}

label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;

}
<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>
Parul
  • 27
  • 4
  • 3
    This doesn't actually align them. It seems like they're aligned because 'First name' and 'Last name' are almost the same width, but they're not quite aligned and it wouldn't work with labels of different sizes. – Solomon Ucko Apr 19 '18 at 21:53