可以强制显示元素：table-cell垂直堆叠而不使用display：block？

Question

作为示例，请使用以下无序列表及其容器：

<div class="table-like">
    <ul>
        <li><span>Table-cells</span></li>
        <li><span>play nice</span></li>
        <li><span>automatically</span></li>
        <li><span>with auto-height/width/stretching and of course, vertical alignment..</span></li>
    </ul>
    <ul class="row2">
        <li><span>but</span></li>
        <li><span>do</span></li>
        <li><span>they</span></li>
        <li><span>stack up (vertically)?</span></li>
    </ul>
</div>

使用以下CSS：

.table-like {
    display: table;
    font-variant: small-caps;
    width: 100%;
}
.table-like ul { 
    display: table-row;
}
.table-like ul li {
    background-color: #DDD;
    border: 1px solid #FFF;
    display: table-cell;
    overflow: hidden;
    padding: .5em 1em;
    vertical-align: middle;
    width: 25%;
}
.table-like ul li span {
    display: block;
    max-height: 2.1em;
}

在保留display:table-cell属性（自动高度，垂直对齐等）的好处的同时，是否无法强制行垂直堆叠？

Answer 1

以下 CSS 可能与您的需求接近：

.table-like {
    font-variant: small-caps;
    width: 100%;
}
.table-like ul { 
}
.table-like ul li {
    background-color: #DDD;
    border: 1px solid #FFF;
    display: table;
    width: 25%;
}
.table-like ul li span {
    padding: 0.5em 1.0em;
    vertical-align: middle;
    display: table-cell;
    height: 2.1em; 
}

如果希望单元格垂直堆叠，则每行需要一个表格单元格， 这就是表的工作方式。

我要做的是将display: table应用于li元素，这会强制它们 是块级别，因此从一个单独的行开始。

然后，您可以将display: table-cell应用于li span元素以便利用 垂直对齐属性等等。

请注意，如果您想在表格单元格中使用max-height，则需要添加一个 <span>元素内的内包装元素，并应用固定或最大高度 到inline-block显示类型。

此外，对于表格单元格，height值被视为最小值（最小高度 什么都不做。）

请注意，如果您有长的不间断文本行，则表格宽度将扩展为 容纳文本，请参阅第一个ul元素的第4个单元格。您可能需要最小宽度 表li元素的值取决于您的设计。

请参见演示：http://jsfiddle.net/audetwebdesign/4tZhd/和下图：