如何在 HTML 中对齐输入表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4309950/
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
How to align input forms in HTML
提问by yoshyosh
I'm new to HTML and I'm trying to learn how to use forms.
我是 HTML 新手，我正在尝试学习如何使用表单。
The biggest issue I am having so far is aligning the forms. Here is an example of my current HTML file:
到目前为止，我遇到的最大问题是对齐表格。这是我当前的 HTML 文件的示例：
<form>
First Name:<input type="text" name="first"><br />
Last Name:<input type="text" name="last"><br />
Email:<input type="text" name="email"><br />
</form>
The problem with this is, the field box after 'Email' is drastically different in terms of spacing compared to first, and last name. What is the 'proper' way to make it so that they 'line-up' essentially?
问题在于，与名字和姓氏相比，“电子邮件”之后的字段框在间距方面截然不同。使它们基本上“排队”的“正确”方法是什么？
I am trying to practice good form and syntax...a lot of people might do this with CSS I am not sure, I have only learned the very basics of HTML so far.
我正在尝试练习良好的形式和语法……很多人可能会用 CSS 来做到这一点，我不确定，到目前为止我只学习了 HTML 的基础知识。
采纳答案by serialk
Another example, this uses CSS, I simply put the form in a div with the container class. And specified that input elements contained within are to be 100% of the container width and not have any elements on either side.
另一个例子，这使用了 CSS，我只是将表单放在一个带有容器类的 div 中。并指定其中包含的输入元素为容器宽度的 100%，并且两边都没有任何元素。
.container {
width: 500px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}<html>
<head>
<title>Example form</title>
</head>
<body>
<div class="container">
<form>
<label>First Name</label>
<input type="text" name="first"><br />
<label>Last Name</label>
<input type="text" name="last"><br />
<label>Email</label>
<input type="text" name="email"><br />
</form>
</div>
</body>
</html>回答by Clément
The accepted answer (setting an explicit width in pixels) makes it hard to make changes, and breaks when your users use a different font size. Using CSS tables, on the other hand, works great:
接受的答案（以像素为单位设置显式宽度）使更改变得困难，并且当您的用户使用不同的字体大小时会中断。另一方面，使用 CSS 表格效果很好：
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>Here's a JSFiddle: http://jsfiddle.net/DaS39/1/
这是一个 JSFiddle：http: //jsfiddle.net/DaS39/1/
And if you need the labels right-aligned, just add text-align: rightto the labels: http://jsfiddle.net/DaS39/
如果您需要右对齐标签，只需添加text-align: right到标签：http: //jsfiddle.net/DaS39/
EDIT: One more quick note: CSS tables also let you play with columns: for example, if you want to make the input fields take as much space as possible, you can add the following in your form
编辑：一个更快速的说明：CSS 表还可以让您使用列：例如，如果您想让输入字段占用尽可能多的空间，您可以在表单中添加以下内容
<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>
you may want to add white-space: nowrapto the labelsin that case.
在这种情况下，您可能想要添加white-space: nowrap到labels。
回答by amonett
A simple solution for you if you're new to HTML, is just to use a table to line everything up.
如果您不熟悉 HTML，一个简单的解决方案就是使用表格来排列所有内容。
<form>
<table>
<tr>
<td align="right">First Name:</td>
<td align="left"><input type="text" name="first" /></td>
</tr>
<tr>
<td align="right">Last Name:</td>
<td align="left"><input type="text" name="last" /></td>
</tr>
<tr>
<td align="right">Email:</td>
<td align="left"><input type="text" name="email" /></td>
</tr>
</table>
</form>
回答by Byron
I find it far easier to change the display of the labels to inline-block and set a width
我发现将标签的显示更改为 inline-block 并设置宽度要容易得多
label {
display: inline-block;
width:100px;
text-align: right;
}
回答by Collin Street
You should use a table. As a matter of logical structurethe data is tabular: this is why you want it to align, because you want to show that the labels are not related solely to their input boxes but also to each other, in a two-dimensional structure.
你应该使用一张桌子。作为逻辑结构的问题，数据是表格形式的：这就是您希望它对齐的原因，因为您希望以二维结构显示标签不仅与其输入框相关，而且彼此相关。
[consider what you would do if you had string or numeric values to display instead of input boxes.]
[考虑如果你有字符串或数字值而不是输入框来显示你会怎么做。]
回答by Samuel EUSTACHI
For this, I prefer to keep a correct HTML semantic, and to use a CSS simple as possible.
为此，我更喜欢保持正确的 HTML 语义，并尽可能使用简单的 CSS。
Something like this would do the job :
像这样的事情可以完成这项工作：
label{
display: block;
float: left;
width : 120px;
}
One drawback however : you might have to pick the right label width for each form, and this is not easy if your labels can be dynamic (I18N labels for instance).
然而，一个缺点是：您可能必须为每个表单选择正确的标签宽度，如果您的标签可以是动态的（例如 I18N 标签），这并不容易。
回答by Gjaa
using css
使用CSS
.containerdiv label {
float:left;
width:25%;
text-align:right;
margin-right:5px; /* optional */
}
.containerdiv input {
float:left;
width:65%;
}
this give you something like:
这给你类似的东西：
label1 |input box |
another label |another input box |
回答by Andrew
I'm a big fan of using definition lists.
我非常喜欢使用定义列表。
<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>
They're easy to style using CSS, and they avoid the stigma of using tables for layout.
它们很容易使用 CSS 设置样式，并且避免了使用表格进行布局的耻辱。
回答by OV Web Solutions
The traditional method is to use a table.
传统的方法是使用表格。
Example:
例子：
<table>
<tbody>
<tr>
<td>
First Name:
</td>
<td>
<input type="text" name="first">
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<input type="text" name="last">
</td>
</tr>
</tbody>
</table>
However, many would argue that tables are restricting and prefer CSS. The benefit of using CSS is that you could use various elements. From divs, ordered and un-ordered list, you could accomplish the same layout.
然而，许多人会争辩说表格是限制性的并且更喜欢 CSS。使用 CSS 的好处是您可以使用各种元素。从 div、有序列表和无序列表中，您可以完成相同的布局。
In the end, you'll want to use what you're most comfortable with.
最后，您将希望使用最适合您的方式。
Hint: Tables are easy to get started with.
提示：表格很容易上手。
回答by mauris
Well for the very basics you can try aligning them in the table. However the use of table is bad for layout since table is meant for contents.
对于非常基础的知识，您可以尝试在表格中对齐它们。然而，表格的使用对布局不利，因为表格是用于内容的。
What you can use is CSS floating techniques.
您可以使用的是 CSS 浮动技术。
CSS Code
CSS 代码
.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */
HTML
HTML
<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>
An elaborated article I wrote can be found answering the question of IE7 float problem: IE7 float right problems
可以找到我写的一篇详细的文章来回答 IE7 浮动问题：IE7 浮动正确问题
