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

Posted 2023-05-09

【中文标题】如何阻止 jQuery Mobile 按钮组溢出？

【英文标题】：How do I stop jQuery Mobile button group from overflowing?

【发布时间】：2018-05-29 20:25:19

【问题描述】：

我试图水平放置 7 个按钮，但在较小的屏幕尺寸上看到一些溢出。

Button Group Overflow

<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>

【问题讨论】：

可能是div的宽度问题，能贴出代码吗？

【参考方案1】：

尝试在 fieldset 标签中直接应用 set mini 版本，如下所示：

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

【参考方案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 中。