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

我试图让三个水平复选框拉伸以占用页面宽度的100％。使用jQuery Mobile将水平复选框宽度拉伸到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％的宽度。

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

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

来源

2014-10-19 Steven

你想每个复选框伸展到100％？在这种情况下，它将成为一个垂直的。或者，每个人应该占33.33％？ – Rajesh 2014-10-19 09:39:11

它已经在工作了！ http://fiddle.jshell.net/yrzun2qr/，发布你试图实现的屏幕截图 – ProllyGeek 2014-10-19 09:45:38

如果一个类添加到您的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

来源

2014-10-19 09:44:25

试过这个，由于某种原因，它使水平复选框垂直堆叠，但是你在正确的轨道上。我只是改变了你的CSS，而不是使用.ui-checkbox标签，第二个CSS规则选择.fullwidth .ui-controlgroup-controls，并且做到了！ – Steven 2014-10-19 12:07:29

我做的另一件事是将第一个CSS选择器的值更改为33.333％。这两件事很好，谢谢！ – Steven 2014-10-19 12:24:16

我想我误解了你想要的，但我很高兴我帮你达到了目标。 :-) – 2014-10-19 12:53:50

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

回答

相关问题