JQuery Mobile滑塊與標籤垂直對齊

我有以下煩人的問題，您可以看到小提琴here。它有一個標籤一個簡單的滑塊，這裏的HTML：JQuery Mobile滑塊與標籤垂直對齊

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

當我調整顯示（即窗口而不是對齊，它應該是大小）： The goal

它顯示了不對齊這樣的：

The problem

任何想法？

來源

2013-03-08 galgo

JQM增加了'邊距：.4em'當窗口縮小。 '.ui-field-contains label.ui-slider {margin-bottom：.4em; }'。使用'@ media'覆蓋它，並將其設置爲'0'而不是'.4em'。 – Omar 2013-03-08 10:15:09

@ OmarNew2PHP謝謝！我不是CSS的專家，你能展示'@ media'的代碼嗎？ – galgo 2013-03-08 15:32:11

只是一個小提示/建議，請在普通瀏覽器或電話設備上測試您的代碼。您的代碼在Chrome上看起來完全不同，不像JSfiddle上的代碼。 – Omar 2013-03-08 17:45:46

我只是改變了CSS來：

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

現在它

來源

2013-03-21 23:14:25 galgo

JQuery Mobile滑塊與標籤垂直對齊

回答

相關問題