• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 310
  • Last Modified:

Alignment of Labels and input fields

What's the best way to align text and a input field.  With the below code everything works correctly, but the alignment of the text and the actual input fields are all over the place.

You can see the example here:
http://jsfiddle.net/gallitin/nsPdB/

How can I make them all align evenly the best way?

          <form method="get" action="#">
          Interest Rate <input type="text" name="interestrate" value="'.$interestrate.'" style="width:50px;"/>%<br>
          Term <input type="text" name="term" value="'.$term.'" style="width:50px;"/>Months<br>
          Down Payment <input type="text" name="downpayment" value="'.$downpayment.'" style="width:50px;"/><br>
          Monthly Payment
          <input type="image" src="assets/img/recalculate.png" style="margin-top:5px;"/>
          <a href="#"><img src="assets/img/continue.png" style="margin-top:5px;"/></a>
          </form>

Open in new window

0
Nathan Riley
Asked:
Nathan Riley
  • 2
  • 2
2 Solutions
 
GaryCommented:
Put your text in a label styled with display:inline-block and a set width - like so
http://jsfiddle.net/nsPdB/1/
0
 
Chris StanyonCommented:
Gary just beat me to it:

http://jsfiddle.net/ChrisStanyon/nsPdB/2/

Also, give your labels a 'for' attribute to match the ID of your inputs - then you can select the input by clicking the label
0
 
GaryCommented:
I never bother with a for for input labels, not intuitive (at least for me) like it is for radio/checkboxes.
0
 
Chris StanyonCommented:
@Gary - Accessibility! Screen readers etc. benefit from having labels explicitly tied to their inputs..
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now