html - 无论标签长度如何，始终将表格居中并排列输入

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/