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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:33:17  来源:igfitidea点击:

displaying html form inputs horizontally

htmlcssformsinput

提问by Kevin Jung

i am trying to recreate the login form shown on tinypic's main page.

我正在尝试重新创建 tinypic 主页上显示的登录表单。

login

登录

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

回答by Thomas Shields

Just add display:inlineto your input elements, as shown here

只需添加display:inline到您的输入元素,如图所示这里