html - "display: table-cell"没有一致的对齐方式

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 结构，而是注入(inject) div 和 hr 中间的元素。

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

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

Demo Fiddle