0

是否可以将生成的表格 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;
}

我想将“Fourth”、“Fifth”和“Sixth”放在第二行（所以放在新行），而不做另一个列表（“ul”）

4

2 回答 2

2

试试这个小提琴<---理想地使用这个

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

或者这个（可能不是这个，但无论如何它就在那里）另一个小提琴

于 2013-08-16T23:46:31.683 回答
0

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

于 2013-08-16T23:56:24.833 回答