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>

表格单元格中的div有一个奇怪的间隙，并且不固定

1 个答案: