在jQuery Mobile中對齊複選框和文本輸入的問題

Question

我不能這樣工作。這可能很簡單，但我不能讓複選框與其各自的文本輸入並排對齊。

這是fiddle

HTML

<fieldset data-role="controlgroup"> 
<div data-role="fieldcontain" style="float:left; width:100%"> 
    <input type="checkbox" name="1" id="1" value="1" /> 
    <input type="text" name="name" id="basic1" value="A" /> 
</div> 
<div data-role="fieldcontain" style="float: left; width:100%"> 
    <input type="checkbox" name="2" id="2" value="2" /> 
    <input type="text" name="name" id="basic2" value="B" /> 
</div> 
<div data-role="fieldcontain" style="float: left; width:100%"> 
    <input type="checkbox" name="3" id="3" value="3" /> 
    <input type="text" name="name" id="basic3" value="C" /> 
</div> 
<div data-role="fieldcontain" style="float: left; width:100%"> 
    <input type="checkbox" name="3" id="4" value="4" /> 
    <input type="text" name="name" id="basic4" value="D" /> 
</div> 
</fieldset> 

我也使用網格嘗試：

<div class="ui-grid-a"> 
<div class="ui-block-a"> 
    <input type="checkbox" name="jobtype" id="1a" value="1" /> 
</div> 
<div class="ui-block-b"> 
    <input type="text" name="name" id="basic1a" value="A" /> 
</div> 

CSS

.ui-input-text { 
width: 80%; 
float:right; 
display:inline 
} 
.ui-block-a { 
width:20% 
} 
.ui-block-b { 
width:80%; 
} 

我在這裏錯過了什麼？謝謝！

Answer 1

要讓JQM增強複選框，環繞輸入元素具有標籤：

<div> 
    <div data-role="controlgroup" style="float:left; width:100%"> 
     <label><input type="checkbox" name="jobtype" id="1" value="1" /></label> 
     <input type="text" name="name" id="basic1" value="A" /> 
    </div> 
    <div data-role="fieldcontain" style="float: left; width:100%"> 
     <label><input type="checkbox" name="jobtype" id="2" value="2" /></label> 
     <input type="text" name="name" id="basic2" value="B" /> 
    </div> 
    <div data-role="fieldcontain" style="float: left; width:100%"> 
     <label><input type="checkbox" name="jobtype" id="3" value="3" /></label> 
     <input type="text" name="name" id="basic3" value="C" /> 
    </div> 
</div> 

然後排隊東西和平衡的高度：

.ui-checkbox { 
    width: 19%; 
    float:left; 
    display:inline; 
    margin-top: 8px !important; 
} 
.ui-checkbox label {  
    height: 12.2px; 
} 
.ui-input-text { 
    width: 80%; 
    float:right; 
    display:inline 
} 

DEMO

Y歐也可以用一個列表視圖做到這一點：

<div class="container"> 
     <ul data-role="listview" class="has-checkDiv"> 
      <li> 
       <div> 
        <input type="text" name="name1" id="basic1" value="A" /> 
       </div> 
       <div class="checkDiv"> 
        <input type="checkbox" name="jobtype" id="1a" value="1" /> 
       </div> 
      </li> 
      <li> 
       <div> 
        <input type="text" name="name2" id="basic2" value="B" /> 
       </div> 
       <div class="checkDiv"> 
        <input type="checkbox" name="jobtype" id="1b" value="1" /> 
       </div> 
      </li> 
     </ul> 
    </div> 

.container { 
    padding-top: 12px; 
} 

.has-checkDiv > li > div:first-child { 
    margin-left: 40px !important; 
} 
.checkDiv { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 40px; 
    bottom: 0px; 
    z-index: 100; 
} 
.checkDiv .ui-checkbox { 
    position: absolute; 
    top: 50%; 
    left: 20px; 
    height: 22px; 
    width: 22px; 
    margin: 0; 
    margin-top: -11px; 
    margin-left: -11px; 
} 

DEMO