如何阻止jQuery Mobile按鈕組溢出？

Question

我試圖水平放置7個按鈕，但是在較小的屏幕尺寸上看到一些溢出。

按鈕組溢出

<div data-mini="true">
    <fieldset data-role="controlgroup" data-type="horizontal">
      <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
      <label for="checkbox-h-2a">Sun</label>
      <input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b">
      <label for="checkbox-h-2b">Mon</label>
      <input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c">
      <label for="checkbox-h-2c">Tue</label>
      <input type="checkbox" name="checkbox-h-2d" id="checkbox-h-2d">
      <label for="checkbox-h-2d">Wed</label>
      <input type="checkbox" name="checkbox-h-2e" id="checkbox-h-2e">
      <label for="checkbox-h-2e">Thu</label>
      <input type="checkbox" name="checkbox-h-2f" id="checkbox-h-2f">
      <label for="checkbox-h-2f">Fri</label>
      <input type="checkbox" name="checkbox-h-2g" id="checkbox-h-2g">
      <label for="checkbox-h-2g">Sat</label>
    </fieldset>
</div>

Answer 1

嘗試直接在fieldset標記中應用set mini版本，如下所示：

<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> 

Answer 2

好吧，我前段時間遇到了同樣的要求，我發現這並不容易。 這就是我解決它的方式：

假設你的<div data-mini="true">有一個類： <div data-mini="true" class="no-wrap"> ：

.no-wrap {
  box-sizing: border-box;
  text-align: center;
  width: 100%;
}

.no-wrap .ui-controlgroup-controls {
  display: inline-block !important;
  width: 100%;
}

.no-wrap .ui-controlgroup-controls .ui-checkbox {
  float: left;
  clear: none;
  width: 14%; // <- 100% / num. of controls
}

.no-wrap .ui-btn {
  text-overflow: initial !important;
}

.no-wrap label.ui-btn {
  text-align: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

說明：每個控件的寬度應以百分比形式設置為100 / num。 在你的控制controlgroup 。 例如，如果您需要：

• 8個控件：寬度：12.5％
• 7個控件：寬度：14.2％

... 等等。

通過添加容器div您還可以在JQM頁面中指定整個controlgroup的寬度：

.no-wrap .ui-controlgroup-controls {
  display: inline-block !important;
  width: 80%; // <- this will set the width of the whole controlgroup
}

演示： https ： //plnkr.co/edit/fFU7Zf5Wr2jD6anD9h4L? p =preview

也許它似乎有點過度烹飪，但原因是保持跨瀏覽器的東西，也在IE中。