无论标签长度如何，始终将输入与输入对齐

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/