displaying html form inputs horizontally

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


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.


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

input { display: inline; }