jqm翻转开关，向左浮动标签，向右切换？答案

【问题标题】：jqm flipswitch, float label left, switch right?jqm翻转开关，向左浮动标签，向右切换？
【发布时间】：2015-03-04 10:33:17
【问题描述】：

我正在尝试在移动应用的页面上添加一堆翻转开关。

我正在使用：

<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>

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

我错过了什么？

我希望让选项填满屏幕的整个宽度。向左标记，向右翻转开关。

【问题讨论】：

标签： javascript jquery cordova jquery-mobile

【解决方案1】：

在这种情况下，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>

然后使用 CSS，您可以将第二列向右对齐并根据需要设置列宽：

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

【讨论】：

【解决方案2】：

显然field-contain 已在 1.4 中弃用，并将在 1.5 中删除。

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

<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 JsFiddle 上设置对齐方式：

<td align="right">

【讨论】：

我正在考虑，但我希望 JQM 能够真正按预期工作......