我正在使用一个完全普通的 jQuery 滑块,我使用以下 CSS 缩小了其句柄:
html body .ui-slider .ui-slider-handle {
width: 10px;
}
这具有缩小滑块手柄的预期效果,但是当我尝试拖动它时,它具有使手柄捕捉到光标左侧位置的不良副作用。
是什么导致了这种情况,我该如何修改这种行为?
我正在使用一个完全普通的 jQuery 滑块,我使用以下 CSS 缩小了其句柄:
html body .ui-slider .ui-slider-handle {
width: 10px;
}
这具有缩小滑块手柄的预期效果,但是当我尝试拖动它时,它具有使手柄捕捉到光标左侧位置的不良副作用。
是什么导致了这种情况,我该如何修改这种行为?
这是因为在 CSS 中.ui-slider .ui-slider-handle
使用。margin-left
当您更改 时width
,请确保也更改margin-left
。
.ui-slider .ui-slider-handle {
width: 10px;
margin-left: -.3em; /*change this*/
}
演示:http: //jsfiddle.net/dirtyd77/Z7pW3/6/