“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结构而是通过在其中间注入div和hr元素来打破布局的流程。

您只需向第一列添加宽度：

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

Demo Fiddle