Question

我正在尝试将三个水平复选框拉伸以占据页面宽度的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>

在Brackets中检查此页面，看起来“fieldset”选择器的宽度已经达到100％。

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

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

Answer 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

使用jQuery Mobile将水平复选框宽度拉伸至100％

1 个答案: