c# - 如何防止滑块拉伸？

Question

刚刚熟悉 jQuery UI。所以，在我看来，这是一段代码：

<label id="min">
    5000</label>
<div id="slider">
</div>
<label id="max">
    9000</label>

以及脚本的一部分：

    $('#slider').slider({
        animate: true,
        range: true,
        min: 5000,
        max: 9000,
        values: [5000, 9000],
        slide: function (event, ui) {
            //doing smth
        }
    });    

一切正常，但滑块被拉伸并占据整条线。标签在它的下方和下方。我希望他们都排成一行。

我应该怎么做才能实现它？

编辑

这是我所期待的：

这就是我所拥有的：

编辑

我试图通过将以下代码添加到我的Site.css文件来覆盖滑块 css：

.ui-slider .ui-slider-handle
{
    position: absolute;
    z-index: 2;
    width: 0.5em !important;
    height: 1.2em !important;
    cursor: default;
}

但没有任何改变。如何让 jQuery 使用这个 CSS？

另一个注意事项：原始的 css 看起来像这样：

.ui-slider .ui-slider-handle
{
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
}

那么，这里是css的问题吗？或者其他什么让我的滑块伸展？

更多的

这是生成的html：

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <div class="ui-slider-range ui-widget-header" style="left: 25.95%; width: 74.05%;">
    </div>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 25.95%;">
    </a>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;">
    </a>
</div>

最后

我必须覆盖.ui-slider类，而不是.ui-slider .ui-slider-handle. 这就是问题所在。

Rajesh Rolen- DotNet De，谢谢！

Answer 1

您可以设置滑块的宽度。 更改jquery滑块的宽度和高度

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
width:1em !important;
height:1em !important;
 cursor: default;
}

http://tycoontalk.freelancer.com/css-forum/200419-jquery-css-slider-width-100-problem.html