对齐表格输入框?

时间:2013-05-17 14:04:03

标签: html css forms input alignment

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

我不知道我是怎么把彼此连接起来的输入盒......

非常感谢任何帮助。

HTML

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

CSS

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

2 个答案:

答案 0 :(得分:12)

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

<强> HTML

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

<强> CSS

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

JSFiddle

答案 1 :(得分:2)

如果您想使用HTML,可以尝试将其放在表格中,或者如果您只是想使用CSS,那么您是否尝试过这个;

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