CODEWITHSUNDEEP
htmlcss
lrnsomethingnew
lrnsomethingnew

Reputation: 5

How to create spaces between <input> elements in HTML/CSS

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: 11319

Answers (3)

itea
itea

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

Patrick C
Patrick C

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

shinkou
shinkou

Reputation: 5154

Many people may suggest something else, but I recommend you use a <table> in your case.

Upvotes: -1

Related Questions