始終中心的形式和排隊的投入，無論標籤長度的

Question

我試圖打造出一個窗體模塊這樣不管的形式可以有各種輸入，以下條件總是滿足：

1. 表單在其包含的元素中居中。 （我認爲這只是inline-block加上text-align: center。）
2. 輸入的寬度和寬度都是相同的，沿着它們的左邊緣排列。
3. 標籤可以是任何長度（在合理範圍內），其右側邊緣全部對齊。
4. 表單只與其最長的標籤/輸入組合一樣寬（換句話說，表單的寬度是動態的，並由最長的標籤決定）。 （下面的紅線在圖像中表示的形式的邊界邊緣按給定的標籤和輸入。）

基本上，我想是這樣執行以下操作：

這種類型的的佈局實際上很容易處理表格，但是我已經讀過表格不適合用於表格，所以我的問題是，我怎樣才能不用表格來完成所有這些工作？

謝謝。

編輯：佈局必須在IE8中工作。

Answer 1

您可以使用flex完成所需的行爲。

HTML結構（這只是一個方法）

<div id="container"> 
    <div class="form-container"> 
     <form> 
      <div class="column"> 
       <label for="text1">This is a label</label> 
       <label for="text2">Label</label> 
       <label for="text3" style="flex-grow:2;">Another larger label :D</label> 
       <label for="text4">A short one!</label> 
      </div> 
      <div class="column"> 
       <input type="text" name="text1" /> 
       <input type="text" name="text2" /> 
       <textarea name="text4" style="flex-grow:2;"></textarea> 
       <input type="text" name="text3" /> 
      </div> 
     </form> 
    </div> 
</div> 

CSS：

#container { 
    text-align: center;  
} 

#container .form-container { 
    display: inline-block; 
} 

#container form { 
    background: #eee; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    padding: 20px; 
} 

#container form .column { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
} 

#container form .column label { 
    padding: 2px; 
    text-align: right; 
} 

#container form .column input, 
#container form .column textarea { 
    align-self: flex-start; 
    width: 200px; 
} 

這裏是一個工作演示：http://jsfiddle.net/gopafm4g/2/