Break line an inline list

Question

I have an inline list and I need to line break the list in two lines...

<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>
</ul>

Desire result:

One Two Three Four < /br> Five Six Seven

Answer 1

What about float and clear?

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

http://jsfiddle.net/hfc0u7e8/

Or if you don't want to float items and use, as you wrote, display: inline, you can use this code with :before:

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

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