Solved

Alignment of Labels and input fields

Posted on 2013-11-20
4
297 Views
Last Modified: 2013-11-20
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
Comment
Question by:N R
  • 2
  • 2
4 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39664273
Put your text in a label styled with display:inline-block and a set width - like so
http://jsfiddle.net/nsPdB/1/
0
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 39664281
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
 
LVL 58

Expert Comment

by:Gary
ID: 39664301
I never bother with a for for input labels, not intuitive (at least for me) like it is for radio/checkboxes.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39664329
@Gary - Accessibility! Screen readers etc. benefit from having labels explicitly tied to their inputs..
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question