對齊標簽和輸入組

Question

如果不使用表格，使用CSS，我如何對齊一組標簽及其相關的輸入控件，如下所示（這些控件將在div中）：

控件的布局如下：

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

Answer 1

這是一種開放式的，因為很大程度上取決於您可能對代碼提出的問題，標簽和其他特定注意事項。

但是，最簡單的方法是使用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 layout，如下所示：

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;
}

小提琴

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/