1

JQM と PhoneGap で作成されたモバイル アプリの「設定」ページを作成しようとしています。

フリップスイッチはテキストのすぐ前に表示されますが、(ネイティブの設定/設定が通常表示されるように) 右側に配置されていないため、非常にまとまりがないように見えます。

次の 2 つの投稿は類似しています: jQuery Mobile の固定ヘッダーの右隅にフリップスイッチを作成するにはどうすればよいですか? jQuery モバイルでフリップ トグル スイッチを右揃えにする方法

しかし、どちらも私の問題を適切に解決していません (最初のリンクではひどいように見えますが、2 番目のリンクでは、フリップスイッチ要素ではありません)。

私のコードの例:

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

更新されたフィドル

于 2015-10-24T14:10:34.453 に答える