Display html form inputs horizontally

Question

I am trying to recreate the login form shown on the tinypic main page.

in html, I have 3 elements of type:

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 tried putting them in separate divs, using float: on the left with a unique class in css but the code is really randomly long. essentially, I wanted to know if there was an easy way to achieve this layout using html and css.

thanks for the time!

Answer 1

This CSS should work, although I have not tested:

 input { display: inline; } 

Answer 2

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 that you encapsulate tags in <label> tags. You can even use the for="inputId" attribute to click the shortcut to bring the focus into focus.

Answer 3

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