Question

我正在尝试为使用JQM和PhoneGap创建的移动应用创建“首选项”页面。

翻转开关显示在文本的正前方，但未与右侧对齐（因为通常会显示本机首选项/设置），因此它看起来非常混乱。

这两个帖子很相似： How do you make a flipswitch on the right corner of a fixed header in jQuery Mobile? How to right-align a flip toggle switch in jQuery mobile

但是没有解决我的问题（在第一个链接看起来很糟糕，在第二个链接中，好吧，它不是flipswitch元素）

我的代码示例：

http://jsfiddle.net/JTGE6/23/

HTML

<label for="radiog_lite_Selec" class="lablsett">Selec</label>
<select name="radiog_lite_Selec" data-mini="true" id="radiog_lite_Selec" data-role="flipswitch" style="position: absolute; right: 0;">
    <option value="1">On</option>
    <option value="0">Off</option>
</select>

CSS

.ui-mobile label.lablsett
{
    left: 0 !important;
    float: left;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 10px;
    color: #000;
}

我的问题：标签文字如何向左和翻转（在文本前面）但是与右边对齐？

谢谢！

Answer 1

将每个选项行放在容器div中：

<div class="optContainer">
    <label for="radiog_lite_Selec" class="lablsett">Select</label>
    <select name="radiog_lite_Selec" data-mini="true" id="radiog_lite_Selec" data-role="flipswitch" style="position: absolute; right: 0;">    
        <option value="1">On</option>    
        <option value="0">Off</option>
    </select>
</div>

然后使用CSS将flipswitch div浮动到右侧：

.ui-mobile label.lablsett {
    left: 0 !important;
    float: left;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 10px;
    color: #000;
}
.optContainer .ui-flipswitch {
    float: right;
    margin-right: 10px;
}

更新了 FIDDLE

如何在jquery mobile 1.4.5中正确对齐flipswitch

1 个答案: