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
}

DEMO：https://plnkr.co/edit/fFU7Zf5Wr2jD6anD9h4L?p=preview

也许看起来有点过度烹饪，但原因是在IE浏览器中保持跨浏览器。

如何阻止jQuery Mobile按钮组溢出？

2 个答案: