Align HTML input fields by

Question

I have a HTML form like     lt html gt    Name  lt input type  text   gt  lt  br gt    Email Address  lt input type  text   gt  lt  br gt    Description of the input value  lt input type  text   gt  lt  br gt    lt  html gt    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

User · Answer

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

User · Answer

Working JS Fiddle  HTML      lt div gt         lt label gt Name  lt  label gt  lt input type  text  gt         lt label gt Email Address  lt  label gt  lt input type    text  gt         lt label gt Description of the input value  lt  label gt  lt input type  text  gt     lt  div gt    CSS   label      display  inline-block      float  left      clear  left      width  250px      text-align  right    input     display  inline-block    float  left

User · Answer

You could use a label  see JsFiddle   CSS  label   display  inline-block  width  210px  text-align  right      HTML   lt html gt        lt label for  name  gt Name  lt  label gt  lt input id  name  type  text  gt  lt br   gt       lt label for  email  gt Email Address  lt  label gt  lt input id  email  type  text  gt  lt br   gt        lt label for  desc  gt Description of the input value  lt  label gt  lt input id  desc  type  text  gt  lt br   gt     lt  html gt     Or you could use those labels in a table  JsFiddle    lt html gt       lt table gt           lt tbody gt               lt tr gt  lt td gt  lt label for  name  gt Name  lt  label gt  lt  td gt  lt td gt  lt input id  name  type  text  gt  lt  td gt  lt  tr gt               lt tr gt  lt td gt  lt label for  email  gt Email Address  lt  label gt  lt  td gt  lt td gt  lt input id  email  type    text  gt  lt  td gt  lt  tr gt               lt tr gt  lt td gt  lt label for  desc  gt Description of the input value  lt  label gt  lt  td gt  lt td gt  lt input id  desc  type  text  gt  lt  td gt  lt  tr gt           lt  tbody gt       lt  table gt    lt  html gt

User · Answer

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

User · Answer

in my case i always put these stuffs in a p tag like     lt p gt      name    lt  input type text   gt   lt  p gt   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

User · Answer

http   jsfiddle net T6zhj 1   Using display table-cell row will do the job without any width needed   The html      lt html gt     lt div gt         lt div class  row  gt  lt label gt Name  lt  label gt  lt input type  text  gt  lt  div gt         lt div class  row  gt  lt label gt Email Address  lt  label gt  lt input type    text  gt  lt  div gt         lt div class  row  gt  lt label gt Description of the input value  lt  label gt  lt input type  text  gt  lt  div gt     lt  div gt    lt  html gt    The Css    label      display  table-cell      text-align  right    input     display  table-cell    div row      display table-row

User · Answer

I have just given width to Label and input type were aligned automatically    x000D   x000D  input type  text     x000D      width 100px  x000D   height 30px  x000D   border-radius 5px  x000D   background-color  lightblue  x000D   margin-left 2px  x000D    position relative  x000D    x000D   x000D  label  x000D  position relative  x000D  width 300px  x000D  border 2px dotted black  x000D  margin 20px  x000D  padding 5px  x000D  font-family AR CENA  x000D  font-size 20px  x000D   x000D    x000D   lt label gt First Name  lt  label gt  lt input type  text  name  fname  gt  lt br gt  x000D   lt label gt Last Name  lt  label gt  lt input type  text  name  lname  gt  lt br gt  x000D   x000D   x000D

[css] Align HTML input fields by :

HTML

CSS

Examples related to css

Examples related to html

Examples related to user-interface

Examples related to alignment