Блог

Это мой jsfiddle

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

У меня есть меню, как показано на скрипке, прямо сейчас меню отображается в одной строке.

Как я могу сделать это отображение в двух строках??

Означает

 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;amp; Chocolates" class="swiper-slide">Chips amp;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;amp; Corn" class="swiper-slide">Snacks amp;amp; Corn</li>
   <li id="Soft Drinks" class="swiper-slide">Soft Drinks</li>
   <li id="Tea amp;amp; Coffee" class="swiper-slide">Tea amp;amp; Coffee</li>
</ul>
  

Добавьте следующий набор правил:

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

Вы можете разделить меню на два разных <ul> . Если вы добавите </ul><ul> после Three</li> , он разделит его на две строки. Вам нужно будет немного настроить css, чтобы исправить высоту.