Javascript jqm翻转开关，左侧浮动标签，右侧开关？

我正试图在一个移动应用程序的页面上设置一组翻转开关

我正在使用：

<div class="ui-content">
  <form>
    <fieldset>
      <div data-role="fieldcontain">
        <label for="checkbox-based-flipswitch">Checkbox-based:</label>
        <input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch">
      </div>
    </fieldset>
  </form>
</div>

基于复选框的：

我的“容器”字段似乎缩短了。它不会拉伸屏幕的整个宽度

我错过了什么

---

我希望有一个选项填充整个屏幕的宽度。标签向左，翻转开关向右。

在这种情况下，jQM网格可能比fieldcontain更适合您：

<div class="ui-grid-a flipContain">
  <div class="ui-block-a">
      <label for="chk1">Checkbox-based:</label>
  </div>
  <div class="ui-block-b">
      <input type="checkbox" id="chk1" data-role="flipswitch" />
  </div>

  <div class="ui-block-a">
      <label for="chk2">Checkbox-based:</label>
  </div>
  <div class="ui-block-b">
      <input type="checkbox" id="chk2" data-role="flipswitch" />
  </div>
</div>

显然，已在1.4中弃用，并将在1.5中删除

你不能使用100%的表格宽度和表格单元格吗？

您可以直接在td上设置路线：

---

我当时正在考虑这个问题，但我希望JQM能够按照预期的方式工作。。。

.flipContain .ui-block-a {
    width: 70%;
    line-height: 48px;
}
.flipContain .ui-block-b {
    width: 30%;
    text-align: right;
}

<table width="100%">
  <tr>
    <td><label for="checkbox-based-flipswitch">Checkbox-based:</label></td>
    <td><input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch"></td>
  </tr>
</table>

td{
   text-align:center;
}

<td align="right">