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

问题描述

在不使用表，使用CSS，我怎么能对齐组标签及其相关输入控件像下面的（这些控件将是一个div）：

该控件将进行布局，如：

  [标签1] [输入1] [Label4] [输入4]
 [Label2的] [输入2] [Label5] [输入5]
 [LABEL3] [输入3] [Label6] [输入6]
 

解决方案

有关您的两列，你会希望把它们放在div容器，它可以再相互或绝对定位来浮动的，或者您的作品布局。

为了使标签占用的空间相同数量的，他们可以用width属性的样式。

左对齐

最后，您的图表中，你已经得到了标签和输入右对齐。这是可行的，但我的眼睛，如果输入朝其标签合理扫描更好。

我知道了所有在这里捣鼓： http://jsfiddle.net/M7AjF/

 ＆LT; D​​IV CLASS =表格列＆GT;
＆LT;标签=输入1＆GT;选项1＆LT; /标签＆gt;
＆LT;选择一个id =输入1＆GT;＆LT;选项＆GT;所有＆LT; /选项＆GT;＆LT; /选择＆GT;
＆LT; BR＆GT;
＆LT;标签=输入2＆​​GT;选项2'; /标签＆gt;
＆LT;输入ID =输入2类型=文本/＆GT;
＆LT; BR＆GT;
＆LT;标签=输入3＆GT;选项3'; /标签＆gt;
＆LT;输入ID =输入3类型=文本/＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV CLASS =表格列＆GT;
＆LT;标签=输入4＆GT;选项4℃; /标签＆gt;
＆LT;选择一个id =输入4＆GT;＆LT;选项＆GT;  - ＆LT; /选项＆GT;＆LT; /选择＆GT;
＆LT; BR＆GT;
＆LT;标签=输入5＆GT;方案5℃/标签＆gt;
＆LT;选择一个id =输入5＆GT;＆LT;选项＆GT; 0℃; /选项＆GT;＆LT; /选择＆GT;
＆LT; BR＆GT;
＆LT;标签=输入6＆GT;方案6≤/标签＆gt;
＆LT;选择一个id =输入6＆GT;＆LT;选项＆GT; 1 LT; /选项＆GT;＆LT; /选择＆GT;
＆LT; / DIV＆GT;
 

和CSS的：

  .FORM列{
    宽度：50％;
    浮动：左;
}
.FORM列标签{
    宽度：40％;
    填充右：10％;
}/ *
这一权利证明你的投入，我不推荐。.FORM列选择，.FORM栏输入{
    浮动：权利;
}
.FORM列BR {
    明确：右;
}
* /
 

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):

The controls will be laid out like:

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

解决方案

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.

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.

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>

And the 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屋！