“显示：表格单元格”没有一致的对齐方式

Question

一旦在 div 标签、一个 HTML 标签之间（例如标题、断点），内容就不再对齐了。示例： Html.DisplayFor (...) 应始终两端对齐。如何解决这个问题？

<div class="table">
    <div class="row">
        <div class="cell">
            <h3>Heading 1</h3>
            <hr />
            <div class="row">
                <div class="cell">Label 1</div>
                <div class="cell">Html.DisplayFor(...)</div>
            </div>
            <div class="row">
                <div class="cell">Label 2 with much more Text</div>
                <div class="cell">Html.DisplayFor(...)</div>
            </div>
            <br />
            <h3>Heading 2</h3>
            <hr />
            <div class="row">
                <div class="cell">Label 3 with Text</div>
                <div class="cell">Html.TextBoxFor(...)</div>
            </div>           
        </div>
        <div class="cell">
            ...
        </div>
    </div>
</div>

CSS：

div .table {
    display: table;
    width: 100%;
}

div .cell {
    display: table-cell;
    padding: 0.3em;
}

div .row {
    display: table-row;
}

它实际上应该看起来更像这样（红线）：

Answer 1

这是因为你打破了布局的流程，不坚持只使用table->row/cell 结构，而是在其中注入div 和hr 元素。

您可以简单地为第一列添加宽度：

.row .cell .row .cell:first-child{
    width:200px;
}

Demo Fiddle