Html 对齐表单输入框?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16611025/
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:29:01  来源:igfitidea点击:

Aligning form input boxes?

htmlcssformsinputalignment

提问by Zevoxa

I have an example here: http://jsfiddle.net/3zSbt/

我在这里有一个例子:http: //jsfiddle.net/3zSbt/

I don't know how I'd even up my input boxes with eachother...

我不知道我是怎么把我的输入框和对方一起打开的......

Any help would be greatly appreciated.

任何帮助将不胜感激。

HTML

HTML

<div id="contactContent">
 <form>
 Email: <input type="text" name="firstName">
 <br>
 Subject: <input type="text" name="lastName">
 </form>
</div>

CSS

CSS

#contactContent { margin-top: 50px; margin-left: 300px;}
input { border: none; margin-left: 50px; margin-bottom: 30px; padding-right: 50px;}

回答by Vucko

There are many ways. One way is putting your value namesin label. Example:

有很多方法。一种方法是将您的值名称放在label. 例子:

HTML

HTML

<label>Email:</label><input type="text" name="firstName" />
<br />
<label>Subject:</label><input type="text" name="lastName" />

CSS

CSS

label{
    display:inline-block;
    width:100px;
}

JSFiddle.

JSFiddle

回答by Daniel Morgan

If you wanted to use HTML you could try putting it in a table, or if you just want to use CSS have you tried this;

如果你想使用 HTML,你可以尝试把它放在一个表格中,或者如果你只想使用 CSS 你试过这个吗?

input {
    display:inline-block;
    float:left;
}