Question

这是我的jsfiddle

我有一个菜单，如小提琴中所示现在，菜单显示在一行下。

如何将显示分为两行？

意味着

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;
}

Answer 2

您可以将菜单拆分为两个不同的<ul>。如果您在</ul><ul>之后添加Three</li>，则会将其拆分为两行。你需要调整一些css来修复高度。

我如何拆分菜单栏两行

2 个答案: