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

LVL 12
Nathan RileyFounderAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Put your text in a label styled with display:inline-block and a set width - like so
http://jsfiddle.net/nsPdB/1/
0
 
Chris StanyonConnect With a Mentor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.