如何防止滑塊拉伸？

剛剛熟悉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 
     } 
    });

一切工作正常，但滑塊被拉伸並採取了整條生產線。標籤在下面和下面。我期望他們都在一條線上。

我該怎麼做才能實現它？

編輯

這是我期待：

Correct

這就是我：

Error

編輯

我試圖通過添加以下代碼到我的的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德，謝謝！

來源

2012-09-05 horgh

您可以設置滑塊的寬度。 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

來源

2012-09-05 04:41:54

你能不能給我一個提示，我怎麼可以申請帶你到一個我有聲明？ – horgh

我沒有';'那裏，但'，'.....如果我加上'width：150，'沒有改變.....如果我加上'width：150！important，'滑塊根本消失.. – horgh

是否設置了寬度：150或150px？..最好寫150px。 –

如何防止滑塊拉伸？

回答

相關問題