html - 可以用显示 : table-cell to stack vertically without using 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元素，这将迫使他们 是 block 级别的，因此从单独的行开始。

然后您可以申请display: table-cell到 li span要利用的元素 vertical-align 属性等等。

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

此外，对于表格单元格，height值被认为是最小值(最小高度 不会做任何事情)。

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

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