这是一个我的意思的示例代码:
<ul class="table"> <li class="table-cell"></li> <li class="table-cell"></li> <li class="table-cell"></li> <li class="table-cell"></li> </ul>
CSS:
.table { display: table; } .table-cell { display: table-cell; width: 25%; }
问:我如何做出第三个和第三个< li> (表单元格)显示在新行上,宽度为50%?
问:有没有办法只使用CSS而不是jQuery或Javascript?
解决方法
简单的答案是:你不能,至少没有列表.将其显示设置为表格单元格的相邻元素视为属于同一行(即使未提供行元素,也将为您创建一个匿名元素).由于列表不允许在ul和li之间包含任何其他标签,所以列表不可能.您必须使用不同的标记或不同的样式.
列表项上的内嵌块:http://jsfiddle.net/XNq74/1/
li { display: inline-block; /* Could use floats here instead */ width: 40%; }
CSS列将是一个合理的选择:http://jsfiddle.net/XNq74/
ul { columns: 2; }
http://caniuse.com/#feat=multicolumn
FlexBox也可以使用,可以与内嵌块结合使用:http://jsfiddle.net/XNq74/2/
ul { display: flex; flex-flow: row wrap; } li { flex: 1 1 40%; }
原文地址:https://www.jb51.cc/css/216399.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。