Question

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

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

Answer 1

使用display:inline-block代替它以防止崩溃。在此之后，您可能需要也可能不需要使用设定的宽度。

Answer 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中，添加此行以覆盖display类的ui-slider属性：

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

将width调整为您需要的内容。

jQuery UI滑块：如何内联它？

2 个答案: