css - 我怎样才能将菜单栏分成两行

Question

这是我的 jsfiddle

http://jsfiddle.net/Cs8Uu/1/

我有一个菜单，如 fiddle 所示 现在菜单显示在一行下。

我怎样才能让那个显示成两行？？

表示

ONE TWO THREE (First Line )
FOUR FIVE SIX (In second line )

谁能告诉我该怎么做？？

上面的CSS是给了我两个

我正在使用它来动态地将数据附加到菜单

function createhorizontaltab(categories) {
var categoryArr = categories;
    for (var i = 0; i < categoryArr[0].length; i++) {
        if (categoryArr[i] != undefined) {
  $("#swiper-wrapper").append('<li id= "' + categoryArr[i] + '" class="swiper-slide">' + categoryArr[i] + '</li>');
        }
    }
}




 <section class="menuWrap">
      <div class="menuInner">
         <div class="swiper-container">
            <ul id="swiper-wrapper" class="swiper-wrapper"> 
            </ul>
         </div>
      </div>
   </section>

请告诉我如何让菜单栏分两行显示？？

更新的答案

 function createhorizontaltab(categories) {
var categoryArr = categories;
    for (var i = 0; i < categoryArr[0].length; i++) {
        if (categoryArr[i] != undefined) {
            if(i==4)
            {
$("#swiper-wrapper").append('</ul><ul>');
            }
  $("#swiper-wrapper").append('<li id= "' + categoryArr[i] + '" class="swiper-slide">' + categoryArr[i] + '</li>');
        }
    }
}

函数创建的输出 HTML 是

<ul id="swiper-wrapper" class="swiper-wrapper" style="width: 0px; height: 30px;">
   <li id="Chips &amp; Chocolates" class="swiper-slide">Chips &amp; Chocolates</li>
   <li id="Ice creams" class="swiper-slide">Ice creams</li>
   <li id="Popcorn" class="swiper-slide">Popcorn</li>
   <li id="Snacks &amp; Corn" class="swiper-slide">Snacks &amp; Corn</li>
   <li id="Soft Drinks" class="swiper-slide">Soft Drinks</li>
   <li id="Tea &amp; Coffee" class="swiper-slide">Tea &amp; Coffee</li>
</ul>

Answer 1

添加以下规则集:

.menuWrap .menuInner ul li:nth-child(4) {
    clear: left;
}