Reputation: 3677
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...
Upvotes: 5
Views: 2966
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
Reputation: 14619
You've got a couple of options, really:
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
Reputation: 8153
add a fieldset, put a width on it. make your inputs and labels display:block; float your inputs right
Upvotes: 1
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
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>
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;
Upvotes: 2
Reputation: 4038
Your <label>
tags were wrapping the <input>
tags which was causing the issue of trying to treat them separately with CSS:
Upvotes: 2