navbar 6個以上でも１列に表示

navbarはボタンが６個以上になると１列２個ごとの複数列になります。ただでさえ狭いスマホの画面で３列も領域をとられると厳しいので１列で６個以上になるようにソースを変更します。

http://stackoverflow.com/questions/6161377/more-than-5-items-per-line-in-jquery-mobile-navbar


スレッドで記載されているオリジナルのソースをモディフィケーションする方法を使用すると６、７個でも１列に表示できますが1.4では若干修正するcssが異なりました。

変更前

変更後

li.ui-block-f,
li.ui-block-g {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  list-style: none;
}

.ui-grid-e,
.ui-grid-f {
  overflow: hidden;
}

.ui-block-f,
.ui-block-g {
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  min-height: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* grid e: 16/16/16/16/16/16 */
.ui-grid-e .ui-block-a,
.ui-grid-e .ui-block-b,
.ui-grid-e .ui-block-c,
.ui-grid-e .ui-block-d,
.ui-grid-e .ui-block-e,
.ui-grid-e .ui-block-f { width: 16.65%; }
.ui-grid-e .ui-block-a { clear: left; }

/* grid f: 14/14/14/14/14/14/14 */
.ui-grid-f .ui-block-a,
.ui-grid-f .ui-block-b,
.ui-grid-f .ui-block-c,
.ui-grid-f .ui-block-d,
.ui-grid-f .ui-block-e,
.ui-grid-f .ui-block-f,
.ui-grid-f .ui-block-g { width: 14.2857%; }
.ui-grid-f .ui-block-a { clear: left; }