0

次の厄介な問題があります。ここでフィドルを見ることができます。ラベル付きのシンプルなスライダーです。HTML は次のとおりです。

<ul data-role="listview" id="general-settings-list">
    <li data-role="fieldcontain" class="ui-btn ui-li ui-btn-inner">
    <div>
    <label class="ui-label" for="shake">Shake</label>
    </div>
    <div id="slider-container">
    <select name="shake" id="shake" data-role="slider" data-mini="true">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</li>
</ul>

次の CSS を使用 (Jquery Mobile 1.3、css、および js を使用):

#slider-container {
    position: relative;
    float:right;  
    margin-top: -10px !important;    
}

#slider-container .ui-slider {
    margin-top: -50px !important;
}

本来あるべき位置合わせではなく、ディスプレイのサイズ (つまり、ウィンドウ サイズ) を変更すると、次のようになります。 目標

次のように位置合わせされていないことを示します。

問題

何か案は？

4

1 に答える 1

0

CSSを次のように変更しました。

#slider-container {
    position: relative;
    float:right;  
    margin-top: -8px !important;    
}

それは今動作します

于 2013-03-21T23:14:25.380 に答える