无论标签长度如何，始终居中表格并对齐输入

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/