Reputation: 5
So far I have this:
Position Applied For: <input type="text" name="position" value="Enter Position" size="20" /> Date: <input type="text" name="date" value="mm/dd/year" size="20" /> <br/>
<br/>
Name: <input type="text" name="last" value="Last Name" size="20" /> <input type="text" name="first" value="First Name" size="20"/> <input type="text" name="middle" value="Middle Name" size="20" /> Phone: <input type="text" name="phone" value="Area Code First" size="20" maxlength="12"/> (Seperate with -) <br/>
<br/>
Address: <input type="text" name="address" value="Address" size="20" /> City: <input type="text" name="city" value="City" size="20" /> State: <input type="text" name="state" value="State" size="20" /> Zip Code: <input type="text" name="zip" value="Zip Code" size="20" maxlength="5"/> <br/>
When it shows up in the browser the forms are right next to each other. How do I get some room put between and nicely aligned?
Upvotes: 0
Views: 11318
Reputation: 444
Use ul and css:
#a-form {list-style: none; margin:0; padding: 0;}
#a-form li {}
#a-form input {display:inline-block; margin-right: 1em;}
<ul id="a-form">
<li>Position Applied For: <input type="text" name="position" value="Enter Position" size="20" /> Date: <input type="text" name="date" value="mm/dd/year" size="20" /></li>
<li>Name: <input type="text" name="last" value="Last Name" size="20" /> <input type="text" name="first" value="First Name" size="20"/> <input type="text" name="middle" value="Middle Name" size="20" /> Phone: <input type="text" name="phone" value="Area Code First" size="20" maxlength="12"/> (Seperate with -)</li>
<li>Address: <input type="text" name="address" value="Address" size="20" /> City: <input type="text" name="city" value="City" size="20" /> State: <input type="text" name="state" value="State" size="20" /> Zip Code: <input type="text" name="zip" value="Zip Code" size="20" maxlength="5"/></li>
</ul>
Upvotes: 4
Reputation: 789
Since they are all text fields, it makes it easier! I would suggest using the CSS display:block feature
Here's the CSS:
input[type="text"]{
display:block;
margin-bottom:20px;
}
and here's your example that I put into JSFiddle. You may need to do some tweaking to get it to your liking, but this is the easiest way I can think of!
Upvotes: 1
Reputation: 5154
Many people may suggest something else, but I recommend you use a <table>
in your case.
Upvotes: -1