[英]“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
結構而是在其中間注入div
和hr
元素來破壞布局的流程。
您可以簡單地在第一列中添加寬度:
.row .cell .row .cell:first-child{
width:200px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.