使用 jQuery Mobile 将水平复选框宽度拉伸到 100%答案

【问题标题】：Stretch horizontal checkbox width to 100% with jQuery Mobile使用 jQuery Mobile 将水平复选框宽度拉伸到 100%
【发布时间】：2014-10-19 17:44:25
【问题描述】：

我正在尝试使三个水平复选框拉伸以占据页面宽度的 100%。

<!DOCTYPE html> 
<html> 
  <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
    <link rel="stylesheet" href="css/style.css">
  </head> 
  <body> 
    <div data-role="page" data-theme="b">
      <div data-role="header">
        <h1>Primary Codes</h1><br>
      </div><!-- /header -->

      <div data-role="content"> 
        <h1 id="result">Code: <span id="prefix"></span><span id="suffix"></span></h1>
        <form>
          <div class="custom">
            <fieldset data-role="controlgroup" data-type="horizontal">
              <input type="checkbox" name="checkbox-h-2a" id="phone">
              <label for="phone">Phone</label>
              <input type="checkbox" name="checkbox-h-2b" id="internet">
              <label for="internet">Internet</label>
              <input type="checkbox" name="checkbox-h-2c" id="video">
              <label for="video">Video</label>
            </fieldset>
          </div>
          <fieldset data-role="controlgroup2">
            <legend></legend>
            <input type="radio" name="jobtype" id="1" value="1">
            <label for="1">New Aerial</label>
            <input type="radio" name="jobtype" id="2" value="2">
            <label for="2">New Underground</label>
            <input type="radio" name="jobtype" id="3" value="3">
            <label for="3">MDU/Apartment</label>    
            <input type="radio" name="jobtype" id="4" value="4">
            <label for="4">Reconnect</label>
          </fieldset>
        </form>

      </div><!-- /content -->

    </div><!-- /page -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
    <script src="js/primary.js"></script>
  </body>
</html>

在括号中检查这个页面，看起来“fieldset”选择器的宽度已经是 100%。

我尝试更改“标签”和“输入”元素的宽度，但无济于事。

注意：我看到过类似的讨论建议使用导航栏元素，但由于我的应用程序的工作方式，这并不是一个真正的选择。它必须是水平复选框。

【问题讨论】：

您希望每个复选框都拉伸到 100%？在这种情况下，它将成为一个垂直的。还是各占 33.33%？
它已经在工作了！ fiddle.jshell.net/yrzun2qr，张贴你想要达到的目标的截图

标签： jquery html css jquery-mobile checkbox

【解决方案1】：

如果您向 fieldset 添加一个类，让您专门针对其中的内容，如下所示：

<fieldset class="fullwidth" data-role="controlgroup" data-type="horizontal">
  <input type="checkbox" name="checkbox-h-2a" id="phone">
  <label for="phone">Phone</label>
  <input type="checkbox" name="checkbox-h-2b" id="internet">
  <label for="internet">Internet</label>
  <input type="checkbox" name="checkbox-h-2c" id="video">
  <label for="video">Video</label>
</fieldset>

...那么这对规则似乎有效：

.fullwidth .ui-controlgroup-controls .ui-checkbox {
    width: 100%;
}
.fullwidth .ui-controlgroup-controls .ui-checkbox label {
    width: 100%;
}

Live Example

【讨论】：

试过这个，由于某种原因，它使水平复选框垂直堆叠，但你在正确的轨道上。我刚刚更改了您的 CSS，因此第二个 CSS 规则选择了 .fullwidth .ui-controlgroup-controls 而不是 .ui-checkbox 标签，并且做到了！
我做的另一件事是将第一个 css 选择器的值更改为 33.333%。这两件事完美无缺，所以谢谢！
我想我误解了你想要的，但我很高兴能帮助你到达那里。 :-)