Break line an inline list - html

Question

I have an inline list and I need to line break the list in two lines...
<ul>
<li><h1>One</h1></li>
<li><h1>Two</h1></li>
<li><h1>Three</h1></li>
<li><h1>Four</h1></li>
<li><h1>Five</h1></li>
<li><h1>Six</h1></li>
<li><h1>Seven</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/

Answer 2

You can this by using css like, here i have added div with cleat both to html to make children contained in ul.
ul li{list-style:none; float:left;}
ul li:nth-child(5){clear:both;}
ul li h1 a{text-decoration:none;}
<ul>
<li><h1>One</h1></li>
<li><h1>Two</h1></li>
<li><h1>Three</h1></li>
<li><h1>Four</h1></li>
<li><h1>Five</h1></li>
<li><h1>Six</h1></li>
<li><h1>Seven</h1></li>
<div style="clear:both;">
</ul>

Answer 3

Apparently splitting the list is undesired, so for a responsive list, just add a div around the lot and give it a suitable width:
html:
<div>
<ul>
<li><h1>One</h1></li>
<li><h1>Two</h1></li>
<li><h1>Three</h1></li>
<li><h1>Four</h1></li>
<li><h1>Five</h1></li>
<li><h1>Six</h1></li>
<li><h1>Seven</h1></li>
</ul>
</div>
CSS:
ul {list-style:none;}
li {display:inline-block;}
div {float:left; width:60%;}
Fiddle here