c# - 如何防止 slider 拉伸(stretch)？

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
        }
    });    

一切正常，但 slider 被拉伸(stretch)并占用了整条线。标签在其下方和下方。我希望它们全部排成一行。

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

编辑

这是我期待的:

这就是我所拥有的:

编辑

我试图通过将以下代码添加到我的 Site.css 文件来覆盖 slider 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 是这里的问题吗？或者其他东西让我的 slider 拉伸(stretch)？？

更多

这是生成的 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

您可以设置 slider 的宽度。 Change the width and height of jquery slider

.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