Question

我正在使用http://jqueryui.com/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;
}

Answer 1

只需修改原始滑块上的css，而不是jquery-ui-slider

添加的类

以下是一个例子：

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

CSS

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

Fiddle

JQuery UI滑块定位

1 个答案: