javascript - jqm flipswitch，向左 float 标签，向右切换？

我正在尝试在移动应用程序的页面上获取大量的翻页开关。

我在用：

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

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



我想念什么？

我希望该选项可以填满整个屏幕宽度。左侧标签，右侧flipswitch。

最佳答案

在这种情况下，jQM网格可能比现场容器对您更有效：

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

关于javascript - jqm flipswitch，向左 float 标签，向右切换？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28852183/