水平显示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"属性,以便单击标签可以使输入成为焦点.