jQuery UI slider : how to inline it?

Question

我试图在同一行显示多个带有标签的 slider ，例如:

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

内联 slider 的正确方法是什么？默认情况下，它们呈现为 block 元素并相应地换行。我尝试更改 CSS display:inline 在这种情况下 slider 只是折叠......

Answer 1

使用 display:inline-block 来防止它折叠。 之后您可能需要也可能不需要使用设置的宽度。