jQuery UI 滑块：如何内联它？答案

【问题标题】：jQuery UI slider: how to inline it?jQuery UI 滑块：如何内联它？
【发布时间】：2012-01-09 22:04:03
【问题描述】：

我正在尝试在同一行显示多个带有标签的滑块，例如：

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 在这种情况下滑块只是折叠...

【问题讨论】：

标签： jquery css jquery-ui slider inline

【解决方案1】：

请改用display:inline-block 以防止其崩溃。之后您可能需要也可能不需要使用设置的宽度。

【讨论】：

【解决方案2】：

如果你和我一样讨厌，这个阐述可能会有所帮助：你应该包括 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 调整为您需要的。

【讨论】：