Html 水平显示html表单输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5970616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
displaying html form inputs horizontally
提问by Kevin Jung
i am trying to recreate the login form shown on tinypic's main page.
我正在尝试重新创建 tinypic 主页上显示的登录表单。
in html, i have the 3 elemnts like this:
在 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" />
i have tried putting them into separate divs, using float:left with a unique class in css but the code is really messy unreasonably long. so essentially, i wanted to know if there was a simple way to achieve this layout with html and css.
我曾尝试将它们放入单独的 div 中，在 css 中使用 float:left 和一个独特的类，但代码真的很乱，不合理地长。所以本质上，我想知道是否有一种简单的方法可以用 html 和 css 实现这种布局。
thanks for the time!
感谢您的时间！
回答by Brian Driscoll
This CSS should work, though I haven't tested:
这个 CSS 应该可以工作，但我还没有测试过：
input { display: inline; }
回答by Iulius Curt
Here is my solution: ( http://jsfiddle.net/HcppN/)
这是我的解决方案：（http://jsfiddle.net/HcppN/）
HTML:
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:
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.
我还建议您将标签封装在标签中<label>。您甚至可以使用该for="inputId"属性，以便单击标签使输入成为焦点。
