如何在 jquery 移动版 1.4.5 中右对齐翻转开关

Question

我正在尝试为使用 JQM 和 PhoneGap 创建的移动应用程序创建一个 "Preference" 页面。

翻转开关出现在文本的正前方，但没有右对齐（原生 preferences/settings 通常出现），所以看起来很杂乱。

另外两个帖子是相似的： 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

但都没有正确解决我的问题（在第一个 link 中看起来很糟糕，在第二个中，嗯，它不是 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;
}

我的问题：如何让Label Text靠左而flipswith（在文字前面）却靠右对齐？

谢谢！

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将翻转开关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;
}

Updated FIDDLE

如何在 jquery 移动版 1.4.5 中右对齐翻转开关

How to right align a flipswitch in jquery mobile 1.4.5

html

css

jquery-mobile

cordova

jquery-mobile-flipswitch