CODEWITHSUNDEEP
htmlcss
Tom Nolan
Tom Nolan

Reputation: 1957

How to Align all inputs in a Form

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;
}

Upvotes: 1

Views: 1990

Answers (3)

anglimasS
anglimasS

Reputation: 1344

Did Some changes your code,

See the link : http://jsfiddle.net/anglimass/V4HAM/8/

Upvotes: 0

Gup3rSuR4c
Gup3rSuR4c

Reputation: 9490

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.

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

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

Live demo

Upvotes: 3

Related Questions