Как правильно выровнять Flipswitch в JQuery Mobile 1.4.5

Question

Я пытаюсь создать страницу "Предпочтения" для мобильного приложения, созданного с помощью 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;
}

Мой вопрос: как можно пометить текст надписью слева и отразить (перед текстом), но выровнять вправо?

Спасибо!

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 вправо:

.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