JQuery UI滑塊定位

我使用的滑塊從http://jqueryui.com/slider/，特別是固定滑塊。我想將此滑塊向下移動到頁面底部，但是當我嘗試在.ui-slider和ui-slider-range-min中設置margin-bottom：5px時，沒有任何反應。有人可以幫我嗎？JQuery UI滑塊定位

.ui-slider { 
position: relative; 
text-align: left; 
margin-bottom: 5px; 
} 
.ui-slider .ui-slider-handle { 
position: absolute; 
z-index: 2; 
width: 1.2em; 
height: 1.2em; 
cursor: default; 
} 
.ui-slider .ui-slider-range { 
position: absolute; 
z-index: 1; 
font-size: .7em; 
display: block; 
border: 0; 
background-position: 0 0; 
} 

/* For IE8 - See #6727 */ 
.ui-slider.ui-state-disabled .ui-slider-handle, 
.ui-slider.ui-state-disabled .ui-slider-range { 
filter: inherit; 
} 

.ui-slider-horizontal { 
height: .8em; 
} 
.ui-slider-horizontal .ui-slider-handle { 
top: -.3em; 
margin-left: -.6em; 
} 
.ui-slider-horizontal .ui-slider-range { 
top: 0; 
height: 100%; 
} 
.ui-slider-horizontal .ui-slider-range-min { 
left: 0; 
margin-bottom: 5px; 
} 
.ui-slider-horizontal .ui-slider-range-max { 
right: 0; 
} 

.ui-slider-vertical { 
width: .8em; 
height: 100px; 
} 
.ui-slider-vertical .ui-slider-handle { 
left: -.3em; 
margin-left: 0; 
margin-bottom: -.6em; 
} 
.ui-slider-vertical .ui-slider-range { 
left: 0; 
width: 100%; 
} 
.ui-slider-vertical .ui-slider-range-min { 
bottom: 0; 
} 
.ui-slider-vertical .ui-slider-range-max { 
top: 0; 
}

來源

2014-03-04 user3216573

如果我的答案不能解決您的問題，請告訴我，您也應該回頭接受您之前某些問題的答案。（您可以點擊答案左邊的白色複選標記以接受它） – Trevor

只需修改原始滑塊上的CSS和不通過jquery-ui-slider

這裏添加的類是一個例子：

<div id="slider"></div>

CSS

#slider { 
    width:80%; 
    margin-left:25px; 
    margin-top:400px; 
}

Fiddle

來源

2014-03-04 22:38:48 Trevor

我注意到，向滑動條div添加'margin-top：5px;'會將滑塊的範圍相對於滑塊向下移動5個像素。這是通過在'.ui-slider-range'中加入'margin：0px;'來解決的。 – Manuel

JQuery UI滑塊定位

回答

相關問題