Html 用于对齐文本框和标签的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6997400/
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
CSS for Aligning TextBox and Label
提问by mint
I'm trying to take my Form layout away from tables and entering the world of div's and css.
我试图让我的表单布局远离表格并进入 div 和 css 的世界。
I'm having difficulty though in my layout. I'd like to order the elements where a label is positioned directly above an input.
Here's what it currently looks like:
虽然我的布局有困难。我想对标签直接位于输入上方的元素进行排序。这是它目前的样子：
I'd like the District Label and Textbox to be vertically aligned, but they seem to be forming a stair pattern.
我希望 District Label 和 Textbox 垂直对齐，但它们似乎形成了楼梯图案。
Here's the css:
这是CSS：
#content
{
position: absolute;
top: 110px;
left: 350px;
width: 775px;
height: 605px;
}
#content label
{
display:inline;
margin-right:4px;
vertical-align:top;
}
#content input
{
float:left;
margin:1px 20px 1px 1px;
}
and the HTML:
和 HTML：
<div id="content">
<label for="txt_RequestId">Request Id</label>
<input id="txt_RequestId" type="text" />
<label for="txt_District">District</label>
<input id="txt_District" type="text" />
</div>
回答by MikeM
nest the inputelements in the labels so the text label and field are grouped.
将input元素嵌套在labels 中，以便对文本标签和字段进行分组。
this usage is specified in the HTML4 spec:
此用法在HTML4 规范中指定：
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
<div id="content">
<label>
Request Id<br />
<input id="txt_RequestId" type="text" />
</label>
<label>
District<br />
<input id="txt_District" type="text" />
</label>
</div>
CSS:
CSS：
#content
{
position: absolute;
top: 110px;
left: 350px;
width: 775px;
height: 605px;
}
#content label
{
display:inline;
float:left;
margin-right:4px;
vertical-align:top;
}
Then apply display:inlineand float:leftto the <label>s (or use display:inline-blockinstead if you don't have to worry about older browsers example)
然后将display:inlineand应用float:left到<label>s （或者，display:inline-block如果您不必担心旧浏览器示例，请改用）
回答by Jason Gennaro
Change this
改变这个
#content input
{
float:left;
margin:1px 20px 1px 1px;
}
to this
对此
#content input
{
display:inline;
margin:1px 20px 1px 1px;
}
That is remove the float:leftand replace with display:inline;.
即删除float:left并替换为display:inline;。
Example: http://jsfiddle.net/jasongennaro/ptKEh/
示例：http: //jsfiddle.net/jasonennaro/ptKEh/
EDIT
编辑
@mdmullinax pointed out that the question also requested the text be above the input field
@mdmullinax 指出该问题还要求文本位于输入字段上方
Missed that ;-)
错过了;-)
In that case, remove the displayrules and use three brs
在这种情况下，删除display规则和使用三个br小号
<div id="content">
<label for="txt_RequestId">Request Id</label><br />
<input id="txt_RequestId" type="text" />
<br />
<label for="txt_District">District</label><br />
<input id="txt_District" type="text" />
</div>
Revised example: http://jsfiddle.net/jasongennaro/ptKEh/2/
回答by tskuzzy
I generally use tables for forms that are laid out like this. They are much easier to work with than CSS (IMO) and the structure is much more clear.
对于像这样布局的表单，我通常使用表格。它们比 CSS (IMO) 更容易使用，并且结构更清晰。
<table>
<tr>
<td>
<label for="txt_RequestId">Request Id</label>
<br /><input id="txt_RequestId" type="text" />
</td>
<td>
<label for="txt_District">District</label>
<br /><input id="txt_District" type="text" />
</td>
</tr>
</table>
CSS is very good for moving elements around with respect to their container. However when you want things to be positioned in a very regular way, dependent on other elements, it can really obfuscate the logic. <table>s are much more explicit about this.
CSS 非常适合移动元素相对于它们的容器。但是，当您希望事物以非常规则的方式定位时，依赖于其他元素，它确实会混淆逻辑。<table>s 对此更加明确。
