CODEWITHSUNDEEP
htmlcssformsinputalignment
Zevoxa
Zevoxa

Reputation: 301

Aligning form input boxes?

I have an example here: http://jsfiddle.net/3zSbt/

I don't know how I'd even up my input boxes with eachother...

Any help would be greatly appreciated.

HTML

<div id="contactContent">
 <form>
 Email: <input type="text" name="firstName">
 <br>
 Subject: <input type="text" name="lastName">
 </form>
</div>

CSS

#contactContent { margin-top: 50px; margin-left: 300px;}
input { border: none; margin-left: 50px; margin-bottom: 30px; padding-right: 50px;}

Upvotes: 3

Views: 28340

Answers (2)

Vucko
Vucko

Reputation: 20844

There are many ways. One way is putting your value names in label. Example:

HTML

<label>Email:</label><input type="text" name="firstName" />
<br />
<label>Subject:</label><input type="text" name="lastName" />

CSS

label{
    display:inline-block;
    width:100px;
}

JSFiddle.

Upvotes: 13

Daniel Morgan
Daniel Morgan

Reputation: 123

If you wanted to use HTML you could try putting it in a table, or if you just want to use CSS have you tried this;

input {
    display:inline-block;
    float:left;
}

Upvotes: 1

Related Questions