空有序列表会破坏CSS表的布局。
空有序列表会破坏CSS表的布局。
提问于 2014-09-11 11:45:56
为什么第一个表中的空无序列表将另一个“表单元格”中的列表推倒？
<div class="table">
<div class="table-row">
<div class="table-cell">
<div>
<ol>
<li>an item</li>
</ol>
</div>
</div>
<div class="table-cell">
<div>
<ol>
</ol>
</div>
</div>
</div>
</div>CSS
.table {
display: table;
width:100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid red;
width: 50%;
}
.table-cell > div {
border: 1px solid blue;
height: 100px;
}
.table-cell ol {
border: 1px solid black;
}http://jsfiddle.net/facboy/7bs4xopg/的完整示例。两个列表都被填充的第二个表是我所期望的布局的外观。
显然，我不可能有空的<ol>，而且效果也是一样的，但是我很好奇原因。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-11 11:54:17
这是由于表格单元格中的基线是如何计算的，取决于它们是否有内联内容。等级库很好地总结了这一点：
单元格的基线是单元格中第一个流内线路箱的基线，或单元格中的第一个流内表行的基线，两者以第一位为准。如果没有这样的行框或表行，则基线是单元格框内容边缘的底部。
由于您的表格单元格及其所有子单元格都没有文本，因此它不会生成任何行框。空单元格中唯一的其他框是由内部<div>和<ol>分别生成的块框。这些框的最外面的底部成为基线。
然后，该基线将与另一个单元格中的文本对齐，而不会实际影响该单元格的内部布局。这会导致细胞被压下。
注意，不单独使用<ol>不会产生预期的效果，因为内部<div>仍然会劫持表单元格的基线。单元格必须是完全空的，或者至少它的内容必须有零高度。
Stack Overflow用户
发布于 2014-09-11 11:48:49
这是因为在默认情况下，单元格的垂直对齐设置为baseline (如屏幕截图中的绿行所示)。
因此，将vertical-align: top添加到.table-cell
.table-cell {
...
vertical-align: top;
}叉子：http://jsfiddle.net/b86qyzc5/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25786625
复制相关文章
相似问题
腾讯云开发者
