1

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

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

这两个其他帖子类似： 如何在 jQuery Mobile 中固定标题的右上角制作翻转开关？ 如何在 jQuery mobile 中右对齐翻转切换开关

但两者都不能正确解决我的问题（在第一个链接中它看起来很糟糕，而在第二个链接中，它不是翻转开关元素）

我的代码示例：

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

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

谢谢！

4

1 回答 1

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

更新了 FIDDLE

于 2015-10-24T14:10:34.453 回答