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

概述作为一个例子,采取以下无序列表和它的容器： <div class="table-like"> <ul> <li><span>Table-cells</span></li> <li><span>play nice</span></li> <li><span>automatically</span></li> <li><span> 作为一个例子,采取以下无序列表和它的容器：

<div >    <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 >        <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;}

是否有办法强制行垂直堆叠,同时保留显示的好处：table-cell属性(自动高度,垂直对齐等)？

解决方法 以下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>内的内包装元素元素并应用固定或最大高度
到内联块显示类型.

此外,对于表格单元格,高度值被视为最小值(最小高度
不会做任何事情).

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

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

总结

以上是内存溢出为你收集整理的html – 可以强制显示元素：table-cell垂直堆叠而不使用display：block？全部内容，希望文章能够帮你解决html – 可以强制显示元素：table-cell垂直堆叠而不使用display：block？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。