How to force inline-block wrap to new line using CSS or jQuery?

Question

I have ten items. How do I make it to two lines, each having five items?

HTML:

<ul>
    <li>item1</li>
    <li>item2</li>
    //...
    <li>item5</li>
    //newline
    <li>item6</li>
    <li>item10</li>
<ul>

CSS:

ul li { display: inline-block; }

Note, I have to use inline-block instead of inline.

Answer 1

You can try this

$( "ul li" ).eq( 4 ).after( "<br />" );

DEMO