CODEWITHSUNDEEP
cssformsxhtmlinputalignment
Aaron Brewer
Aaron Brewer

Reputation: 3677

Input Box Alignment?

How can I get my boxes to align with one another if the text in the is longer than the others.

I have this entire form within an unordered list.

I have copied and displayed the code via jsFiddle, you can find what I am speaking of here...

http://jsfiddle.net/EFByC/

Upvotes: 5

Views: 2966

Answers (6)

Muleskinner
Muleskinner

Reputation: 14478

Why have you marked the form up in <ul>, this is not nessesary.

For a nicer and more readable layout I suggest that you have your labels on top of the input fields. Something like this:

http://jsfiddle.net/Claudius/EFByC/9/

Upvotes: 1

Xavier Holt
Xavier Holt

Reputation: 14619

You've got a couple of options, really:

  • Float the inputs to the right, like Kevin suggested (set the width of the UL to control the spacing).
  • Pull the input out of the label, and give the label a fixed width (as in Peter's answer).
  • Within the label, wrap the label text in a span, and give that span a fixed width (this, like the first option, will let the input stay within the label - see below).

And note that while lots of people are saying that it's bad to have an input inside a label, that's not necessarily true (it's definitely in the standard - see this question for more on that). And wrapping the input in the label lets you get the "click the name and focus the field" behaviour without specifying a bunch of ugly 'for="whatever"' attributes.

Hope this helps!

Upvotes: 1

albert
albert

Reputation: 8153

add a fieldset, put a width on it. make your inputs and labels display:block; float your inputs right

Upvotes: 1

amosrivera
amosrivera

Reputation: 26554

There are several approaches to form styling. I this case you can float the inputs and that will give you the result you want without changing the html.

See demo: http://jsfiddle.net/EFByC/8/

Upvotes: 0

Peter Olson
Peter Olson

Reputation: 143037

I would recommend that you change your form HTML like this

<li><label for="firstname">PATIENT FIRST NAME: </label><input type="text" id="firstname"/></li>
<li><label for="middle">PATIENT MIDDLE INITIAL:(OPTIONAL) </label><input type="text" id="middle" /></li>
<li><label for="last">PATIENT LAST NAME: </label><input type="text" id="last" /></li>
<li><label for="date">DATE OF BIRTH: </label><input type="text" id="date" /></li>
<li><label for="gender">GENDER: </label><input type="text" id="gender" /></li>
<li><label for="id">SUBSCRIBER ID: </label><input type="text" id="id"/></li>
  • Give each form field a unique ID
  • Do not wrap input inside the label
  • You can use the for attribute on the label to connect it to an input.

Add a css rule to #form-container label to give them a specific width:

width: 210px;

See demo.

Upvotes: 2

Allen Liu
Allen Liu

Reputation: 4038

Your <label> tags were wrapping the <input> tags which was causing the issue of trying to treat them separately with CSS:

http://jsfiddle.net/EFByC/3/

Upvotes: 2

Related Questions