How to Align all inputs in a Form - html

Question

I am trying to figure out how to align the left side of all of the inputs together. Right now the entire .element row is aligned to the left, so all of the input fields are staggered. I don't want the inputs stagger I want the labels text aligned to the right and the inputs all aligned together. I've tried a bunch of random CSS, but I can't seem to figure it out. Any ideas?
<form>
<div class="element"><label>Name:</label><input name="Name" type="text" /></div>
<div class="element"><label>Email:</label><input name="Email" type="text" /></div>
<div class="element"><label>Phone:</label><input name="Phone" type="text" /></div>
<div class="element"><label>Address Line 1:</label><input name="Address1" type="text" /></div>
<div class="element"><label>Address Line 2:</label><input name="Address2" type="text" /></div>
<div class="element"><label>City:</label><input name="City" type="text" /></div>
<div class="element"><label>State:</label><input name="State" type="text" /></div>
<div class="element"><label>Zip Code:</label><input name="ZipCode" type="text" /></div>
<div class="element"><label>Birth Date:</label><input name="Bdate" type="text" /></div>
<div class="element"><label>Class Selection:</label><input name="Class" type="text" /></div>
<div class="element"><label>Preferred Meeting Time:</label><input name="Time" type="text" /> </div>
</form>
#registerwrapper .element {
margin-bottom: 15px;
vertical-align: middle;
}
#registrationwrapper label * {
float: left;
font-size: 16px;
}
#registrationwrapper input {
padding: 5px;
margin-left: 10px;
}

Answer 1

Hey now used to this stylesheet Give to your label Display inline-block; and give to width according to your layout
Live demo

Answer 2

The direct answer to your question is this:
label {
display: block;
margin-right: 5px; /* give some breathing room between your label and inputs */
padding-top: ?px; /* add this if you're v-aligning to top to adjust the label alignment to the input */
text-align: right;
vertical-align: top; /* add this when you've got larger fields like textareas bumping things out of alignment */
width: ?px;
}
But, I feel compelled to ask why you're wrapping all your label/field combos with divs (layers)? I recommend using paragraphs instead, like so:
<form>
<p>
<label for="">Field</label>
<input id="" />
</p>
</form>
And you also don't need to add a class to each row. Just do this:
form p {
}
form p label {
}
form p input {
}
Now the amount of bytes you're sending to the client is far less, and the HTML is far easier to read.

Answer 3

Did Some changes your code,
See the link : http://jsfiddle.net/anglimass/V4HAM/8/