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"
属性,以便单击标签使输入成为焦点。