对齐标签和输入组 [英] Align group of labels and inputs

问题描述

如果不使用表格，使用CSS，我如何对齐一组标签及其相关的输入控件，如下所示（这些控件将在div中）：

Without the use of tables, using CSS, how can i align a group of labels and their associated input controls like below (these controls will be in a div):

out

 [Label1] [Input1]     [Label4] [Input4]
 [Label2] [Input2]     [Label5] [Input5]
 [Label3] [Input3]     [Label6] [Input6]

推荐答案

对于你的两列，你需要将它们放在容器div中，然后可以相互浮动或绝对定位，或任何适用于你的布局。

For your two columns, you'll want to put them in container divs, which could then be floated against each other or absolutely positioned, or whatever works for your layout.

要使标签占用相同的房间空间，可以使用width属性来设置样式。

To make the labels take up the same amount of room, they can be styled with a width attribute.

最后，图中，标签左对齐，输入右对齐。这是可行的，但是对我的眼睛来说，如果输入对于他们的标签是合理的，它会扫描得更好。

Finally, in your diagram, you've got the labels left-justified and the inputs right-justified. That's doable, but to my eyes it scans better if the inputs are justified toward their labels.

我有一个小东西在这里： http://jsfiddle.net/M7AjF/

I've got it all in a fiddle here: http://jsfiddle.net/M7AjF/

<div class="form-column">
<label for="Input1">Option 1</label> 
<select id="Input1"><option>All</option></select>
<br>
<label for="Input2">Option 2</label> 
<input id="Input2" type="text"/>
<br>
<label for="Input3">Option 3</label> 
<input id="Input3" type="text"/>
</div>

<div class="form-column">
<label for="Input4">Option 4</label> 
<select id="Input4"><option>--</option></select>
<br>
<label for="Input5">Option 5</label> 
<select id="Input5"><option>0</option></select>
<br>
<label for="Input6">Option 6</label> 
<select id="Input6"><option>1</option></select>
</div>

而css：

.form-column { 
    width: 50%;
    float:left; 
}
.form-column label {
    width: 40%;
    padding-right: 10%;
}

/*
This right justifies your inputs, which I don't recommend.

.form-column select, .form-column input {
    float: right;
}
.form-column br {
    clear: right;
}
*/

这篇关于对齐标签和输入组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！