отображение html-форм по горизонтали

Question

Я пытаюсь воссоздать форму входа, показанную на главной странице tinypic.

в html, у меня есть 3 элемента вроде этого:

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" />

Я попытался поместить их в отдельные div, используя float: left с уникальным классом в css, но код действительно запутан неоправданно долго.по сути, я хотел знать, существует ли простой способ добиться этого макета с помощью html и css.

спасибо за то время!

Answer 1

Этот CSS должен работать, хотя я не проверял:

input { display: inline; }

Answer 2

Вот мое решение: (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;
}

Я также рекомендую инкапсулироватьметки в тегах <label>.Вы даже можете использовать атрибут for="inputId", чтобы при щелчке по метке ввод был в фокусе.

Answer 3

Просто добавьте display:inline к вашим элементам ввода, как показано здесь