html - table-cell 中的 div 有一个奇怪的间隙并且没有固定

Question

我用 ul、li 和 div 制作了一张表。这是我的代码。

.mwbtable {display:table; width:100%; border-collapse:collapse; }
.t-row {display:table-row; height:40px; line-height:40px; }
.t-cell1, .t-cell2, .t-cell3 {display:table-cell; }
.t-cell1 {width:100px; background:#ccc; }
.t-cell2 {background:#ddd; }
.t-cell3 {width:340px; background:#777; }
.t-cell3 .order {}
.order > div {display:inline-block; float:left; }
.list1 {width:100px; text-align:center; }
.list2 {width:50px; text-align:center; }
.list3 {width:100px; text-align:center; }
.list4 {width:90px; text-align:center; }

<ul class="mwbtable">
    <li class="t-row">
        <div class="t-cell1">tc1</div>
        <div class="t-cell2">tc2</div>
        <div class="t-cell3">
            <div class="order">
                <div class="list1">1</div>
                <div class="list2">2</div>
                <div class="list3">3</div>
                <div class="list4">4</div>
            </div>
        </div>
    </li>
</ul>

在我输入“tc1”、“tc2”之前，它很好。但是我在 div.t-cell1 或 dic.t-cell2 中输入了一些东西，它的高度不对。

我不知道我错过了什么。

Answer 1

奇怪的间距是由于垂直对齐。

我附上了一个片段，它通过将你的三个单元格设置为 vertical-align: top; 来解决问题。

.mwbtable {display:table; width:100%; border-collapse:collapse; }
.t-row {display:table-row; height:40px; line-height:40px; }
.t-cell1, .t-cell2, .t-cell3 {display:table-cell; vertical-align: top; }
.t-cell1 {width:100px; background:#ccc; }
.t-cell2 {background:#ddd; }
.t-cell3 {width:340px; background:#777; }
.t-cell3 .order {}
.order > div {display:inline-block; float:left; }
.list1 {width:100px; text-align:center; }
.list2 {width:50px; text-align:center; }
.list3 {width:100px; text-align:center; }
.list4 {width:90px; text-align:center; }

<ul class="mwbtable">
    <li class="t-row">
        <div class="t-cell1">tc1</div>
        <div class="t-cell2">tc2</div>
        <div class="t-cell3">
            <div class="order">
                <div class="list1">1</div>
                <div class="list2">2</div>
                <div class="list3">3</div>
                <div class="list4">4</div>
            </div>
        </div>
    </li>
</ul>