水平显示HTML表单输入

我想重新创建在tinypic主页上显示的登录表单。水平显示HTML表单输入

在HTML

，我有3个elemnts这样的：

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，使用浮动：左有一类独特的CSS 但代码实在太杂乱无理。所以基本上，我想知道是否有一个简单的方法来实现这种布局与HTML和CSS。

感谢您的时间！

来源

2011-05-11 Kevin Jung

你有什么问题？ http://jsfiddle.net/2LYuX/ – mellamokb 2011-05-11 21:09:18

ops我的不好，我的部分的div宽度对于输入来说太小lulz – 2011-05-11 21:13:25

至少选择一个答案，然后在发布问题之前再深入一点 – 2011-05-11 21:16:50

这个CSS应该工作，虽然我没有测试：

input { display: inline; }

来源

2011-05-11 21:09:38

只需添加display:inline您输入元素，如图here

来源

2011-05-11 21:08:45

这里是我的解决方案：（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"属性，以便点击标签将输入引入焦点。

来源

2011-05-11 21:11:57

你保存了一天！谢谢！ – 2013-01-08 15:32:24

水平显示HTML表单输入

回答

相关问题