jQuery UI 滑块 CSS

Posted 2023-03-06

【中文标题】jQuery UI 滑块 CSS

【英文标题】：jQuery UI slider CSS

【发布时间】：2013-09-21 18:56:34

【问题描述】：

大家好，我正在寻找 jQueryUI 滑块样式的答案。 我想知道如何在 div 的顶部进行填充，以便滑块在我尝试在所有滑块类上使用 padding-top: 10px; 的页面上坐得更多，因为我找不到任何解决方案。也许我已经转向很长时间了 :) 这是我正在玩的代码

/*!
 * jQuery UI Slider 1.8.21
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Slider#theming
 */
.ui-slider  position: relative; text-align: left; 
.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; 

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

【参考方案1】：

在设置 .ui-slider 样式时使用 margin-top 而不是 padding-top。

这是一个工作示例。 http://jsfiddle.net/mVQhF/

.ui-slider  margin-top: 20px