displaying html form inputs horizontally

Question

i am trying to recreate the login form shown on tinypic's main page.

in html, i have the 3 elemnts like this:

E-Mail:
<input type="text" name="id" maxlength="30" value="" />
Password:
<input type="text" name="pw" maxlength="30" value="" />

<input type="submit" name="submit" value="Login" />

i have tried putting them into separate divs, using float:left with a unique class in css but the code is really messy unreasonably long. so essentially, i wanted to know if there was a simple way to achieve this layout with html and css.

thanks for the time!

Answer 1

This CSS should work, though I haven't tested:

input { display: inline; }

Answer 2

Just add display:inline to your input elements, as shown here

Answer 3

Here is my solution: ( http://jsfiddle.net/HcppN/ )

HTML:

<label>E-Mail:</label>
<input type="text" name="id" maxlength="30" value="" />
<label>Password:</label> 
<input type="text" name="pw" maxlength="30" value="" />

<input type="submit" name="submit" value="Login" />

CSS:

input, label {
    float:left;
    margin:5px;
}

I also recommend you to encapsulate the labels in <label> tags. You can even use the for="inputId" attribute, so that clicking on the label brings the input into focus.