Question

是否可以将表css生成两行？

您可以在此处查看一个简单示例：http://jsfiddle.net/EHdLt/2/

HTML：

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
    <li>Sixth</li>
</ul>

的CSS：

ul {
    display: table;
    width: 100%;
    padding: 0;
}
li {
    display: table-cell;
    background-color: #444;
    color: #FFF;
    padding: 5px 10px;
    text-align: center;
}

我想把“第四”，“第五”和“第六”放在第二行（所以在新行上），而不做另一个列表（“ul”）

Answer 1

试试这个fiddle＆lt; ---理想地使用这个

<强> CSS

*{
    margin:0;
        padding:0;
    border:0;
}
ul {
    display: table;
    width: 100%;
    padding: 0;
    list-style:none;
    padding:0;
    margin:0;
}
li {
    display:inline-block;
    background-color: #444;
    color: #FFF;
    padding: 5px 0;
    text-align: center;
    width:33%;
}
li:nth-child(even) {
    background-color: #666;
}

ul li:nth-child(4){
    clear:both;
}

其他（不是很好）解决方案

这jsfiddle

或者这个（可能不是这个，但无论如何它都在那里）anotherfiddle

Answer 2

我在这里http://jsfiddle.net/PHPglue/ee68V/做了另一个<ul>。

2行的Css表格单元格

2 个答案: