css - 带有标签垂直对齐的 JQuery Mobile 滑块

Question

我有以下烦人的问题，你可以在这里看到小提琴。它是一个带有标签的简单滑块，这是 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;
}

当我调整显示大小（即窗口大小）而不是按原样对齐时：

它显示未对齐，如下所示：

有任何想法吗？

Answer 1

我刚刚将 CSS 更改为：

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

现在可以使用