Solved

Alignment of Labels and input fields

Posted on 2013-11-20
4
296 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html5 auto send email 7 22
Change javascript css 1 20
Zoom the page when you go in from your phone 3 20
PHP Sessions in WordPress 8 5
This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

867 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now