我正在尝试为使用JQM和PhoneGap创建的移动应用程序创建“首选项”页面。
Flipswitch出现在文本的正前方，但未与右侧对齐（通常会出现本机首选项/设置），因此它看起来非常混乱。
这两个其他职位相似：
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;
}
我的问题：标签文本如何位于左侧，翻转标签（位于文本前面）却如何与右侧对齐？
谢谢！
最佳答案
将每个选项行放入容器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