我正在使用 http://jqueryui.com/slider/ 中的 slider ,尤其是固定 slider 。我想将此 slider 向下移动到页面底部,但是当我尝试在 .ui-slider 和 ui-slider-range-min 中设置 margin-bottom: 5px 时,没有任何反应。有人可以帮助我吗?
.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;
}
最佳答案
只需修改原始 slider 上的CSS,而不是jquery-ui-slider添加的类
这是一个例子:
<div id="slider"></div>
CSS
#slider {
width:80%;
margin-left:25px;
margin-top:400px;
}
关于JQuery UI slider 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22184571/