jQuery Mobile导航栏中每行超过5个项目 [英] More than 5 items per line in jQuery Mobile navbar

问题描述

我没有成功找到一个变量来更改导航栏中一行中的最大项目数.

I have unsuccessfully looked for a variable to change the maximum number of items in a single line in a navbar.

我只是从jQuery Mobile开始，尝试创建一个包含约7个单字母项目的导航栏.当项目超过5个时，导航栏会自动换行，这对我的项目来说是不可取的.

I am just starting with jQuery Mobile, trying to create a navbar with around 7 single-letter items. The navbar wraps automatically when more than 5 items are present, which is undesirable for my project.

有人能指出我在规范此行为的代码或css中的一段吗?

Can anyone point me to a piece in the code or css that regulates this behavior?

推荐答案

使用jQuery mobile 1.4.0，我要做的就是创建自己的CSS类:

Using jQuery mobile 1.4.0, all I had to do is to create my own CSS class:

.mytab {
    width: 12.5% !important;  /* 12.5% for 8 tabs wide */
    clear: none !important;  /* Prevent line break caused by ui-block-a */
}

..并将其包含在我的列表中:

..and include it in my list:

<ul id='tabsList'>
  <li class="mytab"><a href="#tab1" data-ajax="false">One</a></li>
  <li class="mytab"><a href="#tab2" data-ajax="false">Two</a></li>
  <li class="mytab"><a href="#tab3" data-ajax="false">Three</a></li>
  <li class="mytab"><a href="#tab4" data-ajax="false">Four</a></li>
  <li class="mytab"><a href="#tab5" data-ajax="false">Five</a></li>
  <li class="mytab"><a href="#tab6" data-ajax="false">Six</a></li>
  <li class="mytab"><a href="#tab7" data-ajax="false">Seven</a></li>
  <li class="mytab"><a href="#tab8" data-ajax="false">Eight</a></li>
</ul>

(原始答案的jQuery移动版本错误)

(original answer had jQuery mobile version wrong)

这篇关于jQuery Mobile导航栏中每行超过5个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！