jQuery UI滑塊：如何內聯它？

我試圖在同一行上顯示多個滑塊與標籤，如：jQuery UI滑塊：如何內聯它？

Label1: [----O--] Label2: [--O---] Label3: [O-----]

所有這些內容是通過JS創建：

var controls = $('<div></div>'); 
controls.append($('<b>Label1:</b>')); 
controls.append($('<div></div>').slider({...})); 
controls.append($('<b>Label2:</b>')); 
controls.append($('<div></div>').slider({...})); 
controls.append($('<b>Label3:</b>')); 
controls.append($('<div></div>').slider({...})); 
// insert controls in the DOM

什麼是內聯滑塊的正確方法？默認情況下，它們被渲染爲塊元素並相應地中斷行。我試圖改變CSS display:inline在這種情況下，滑塊只是崩潰...

來源

2011-11-30 ak.

而不是使用display:inline-block以防止崩潰。之後您可能需要也可能不需要使用設定的寬度。

來源

2011-11-30 17:09:01 Toast

如果你是作爲noobious我，這可能制定幫助：你應該包括jQuery的UI CSS，例如，這個URL：

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css

在裏面，你會看到：

.ui-slider .ui-slider-range { 
    position: absolute; z-index: 1; 
    font-size: .7em; 
    display: block; 
    border: 0; background-position: 0 0; 
}

設置顯示爲block。你想要它是inline-block。但是，如果你從網絡中包含該CSS，則無法對其進行編輯。所以你需要調整你自己的CSS來使它工作。

在你的CSS，加入這行來覆蓋ui-slider類display屬性：

.ui-slider { display : inline-block; width : 10em; }

調整width是你所需要的。

來源

2016-05-15 04:28:56

jQuery UI滑塊：如何內聯它？

回答

相關問題