中断行内联列表

Question

我有一个内联列表,我需要在两行中打破列表...

<ul>
    <li><h1><a href="#">One</a></h1></li>
    <li><h1><a href="#">Two</a></h1></li>
    <li><h1><a href="#">Three</a></h1></li>
    <li><h1><a href="#">Four</a></h1></li>
    <li><h1><a href="#">Five</a></h1></li>
    <li><h1><a href="#">Six</a></h1></li>
    <li><h1><a href="#">Seven</a></h1></li>

欲望结果:

一二三四</ br>五六七

Answer 1

怎么样float和clear？

ul {overflow: hidden;}
li {float: left;}
li:nth-child(4) {clear: left;}

http://jsfiddle.net/hfc0u7e8/

或者如果你不想像你所写的那样浮动项目和使用display: inline,你可以使用以下代码:before:

ul {overflow: hidden;}
li, h1 {display: inline;}
li:nth-child(4):before {display: block; content: '';}

http://jsfiddle.net/hfc0u7e8/1/