Question

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

Preferred layout

控件的布局如下：

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

Answer 1

这是开放式的，因为很多都取决于您的代码可能包含的问题，标签和其他具体注意事项。

然而，完成这样的事情（IE8 +）的最简单方法可能是使用display:table和display:table-cell。

这是一个快速的小提琴，基本上是这样做的：http://jsfiddle.net/cwz3g/

它使用了很多div：每列一个，每个标签/字段配对一个，标签和字段各一个，但应该涵盖许多常见的事情，如标签和字段的垂直对齐。你可能只需要为你的代码情况调整一些东西，但它应该让你开始。

Answer 2

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

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

最后，在您的图表中，您已经使标签左对齐并且输入右对齐。这是可行的，但在我看来，如果输入符合他们的标签，它会更好地扫描。

我在这里完成了一切：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;
}
*/

Answer 3

我建议使用display:table布局，如下所示：

<强> HTML

<div class="table">
    <div class="row">
        <div class="cell"><label>Option 1</label></div>
        <div class="cell"><select><option>ALL</option></select></div>
        <div class="cell"><label>Option 4</label></div>
        <div class="cell"><select><option>--</option></select></div>
    </div>
    <div class="row">
        <div class="cell"><label>Option 2</label></div>
        <div class="cell"><input type="text"></input></div>
        <div class="cell"><label>Option 5</label></div>
        <div class="cell"><input type="text"></input></div>
    </div>
    <div class="row">
        <div class="cell"><label>Option 3</label></div>
        <div class="cell"><input type="text"></input></div>
        <div class="cell"><label>Option 6</label></div>
        <div class="cell"><select><option>1</option></select></div>
    </div>
</div>

<强> CSS

.table{
    display:table;
}

.row{
    display:table-row;
}

.cell{
    display:table-cell;
}

.table > .row > .cell{
    text-align: right;
    padding-right: 75px;
}

.table > .row > .cell > input{
    width:75px;
}

fiddle

Answer 4

您可以轻松使用bootstrap.css。 http://getbootstrap.com/components/ 检查我的小提琴。

<form class="form-horizontal" role="form" method="post" action="">
<div class="col-xs-6">
  <div class="form-group">
    <label class="col-xs-4">Title</label>
    <div class="col-xs-8">
        <input name="title" type="text" class="form-control" value="Circular Countdown"/>
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-4">Title</label>
    <div class="col-xs-8">
        <input name="title" type="text" class="form-control" value="Circular Countdown"/>
    </div>
  </div>    
 <div class="form-group">
    <label class="col-xs-4">Title</label>
    <div class="col-xs-8">
        <input name="title" type="text" class="form-control" value="Circular Countdown"/>
    </div>
  </div>
</div>
<div class="col-xs-6">
  <div class="form-group">
    <label class="col-xs-4">Title</label>
    <div class="col-xs-8">
        <input name="title" type="text" class="form-control" value="Circular Countdown"/>
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-4">Title</label>
    <div class="col-xs-8">
        <input name="title" type="text" class="form-control" value="Circular Countdown"/>
    </div>
  </div>    
 <div class="form-group">
    <label class="col-xs-4">Title</label>
    <div class="col-xs-8">
        <input name="title" type="text" class="form-control" value="Circular Countdown"/>
    </div>
  </div>
</div>    
</form>

http://jsfiddle.net/4M7qH/

对齐标签和输入组

4 个答案: