簡體   English   中英

“顯示:表格單元”沒有一致的對齊方式

[英]“display: table-cell” has no constistent alignment

一旦在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;
}

實際上應該看起來像這樣(紅線):

當前外觀和期望外觀(紅色)

這是因為您不通過僅使用table->row/cell結構而是在其中間注入divhr元素來破壞布局的流程。

您可以簡單地在第一列中添加寬度:

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

演示小提琴

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM