用于表单布局的 HTML/CSS 显示表

Question

在灵活的 HTML/CSS 布局上工作，您只需添加 form、row、cell 标签、cell input 类 - 它处理所有内容（宽度、垂直对齐等）。

我选择使用display: table 及其子table-row、table-cell - 因为它可以顺利处理大部分问题，而无需黑客。目标是有这样的东西（我可以将 2 个容器放在一个单元格内，它们将自动具有 50% 的宽度，或者 3 个容器的 33% 或 4 个容器的 25%，等等）：

我遇到的问题是表格单元格内的表格跳出边框：

有什么建议可以解决这个问题吗？

---

编辑： JSFiddle 示例：https://jsfiddle.net/3gcnaetx/1/

Answer 1

我建议为此使用引导程序，因为引导程序提供了一个网格来解决此类问题。如果您想为此制作自己的 css，可以查看我的 sn-p 中的想法。不知道能不能解决你的问题，希望对你有所帮助。

CSS 和 HTML 片段：

*{
    box-sizing: border-box; 
}
.formrow:after, .col-2:after{
    display: table;
    content: " ";
    clear: both;
}
.col-2 {
    border: 1px dashed black;
    height: 100%;
    padding: 5px;
    width: 50%;
    min-width: 200px;
    float: left;
}
label {
    float: left;
    padding-right: 10px;
}

<div class="form">
    <form>
        <div class="formrow">
            <div class="col-2"><label for="input1">Label</label></div>
            <div class="col-2"><input id="input1"></input></div>
        </div>
        <div class="formrow">
            <div class="col-2"><label for="input2">Even longer label</label></div>
            <div class="col-2"><input id="input2"></input></div>
        </div>
        <div class="formrow">
            <div class="col-2">
                <label for="input3">Label</label>
                <input id="input3"></input>
            </div>
            <div class="col-2">
                <label for="input4">Label</label>
                <input id="input4"></input>
            </div>
        </div>
    </form>
</div>