Вопросы по выравниванию флажков и текстовых входов в 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 НУ может также сделать это с ListView:

<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