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; }