使用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％

回答

相關問題