gpt4 book ai didi

javascript - jqm Flipswitch, float 标签向左,开关向右?

转载 作者:行者123 更新时间:2023-12-02 16:24:09 24 4
gpt4 key购买 nike

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

我正在使用:

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

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

Ripple Emulator Screenshot. Same rendering on device

我错过了什么?

我希望该选项能够填充屏幕的整个宽度。标签向左,翻转开关向右。

最佳答案

在这种情况下,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;
}

关于javascript - jqm Flipswitch, float 标签向左,开关向右?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28852183/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com