jQuery UI slider: how to inline it?

I'm trying to display several sliders with labels on the same line, eg:

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

All this content is created via 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

What's the proper way to inline sliders? By default they are rendered as block elements and break lines accordingly. I tried changing CSS display:inline in this case the slider just collapses...

Answers


Use display:inline-block instead to keep it from collapsing. You may or may not need to use a set width after that.


Need Your Help

Using the same pointer in a linked list

c pointers struct linked-list

I am trying to understand so called linked list in c using struct-nodes. What I want is to use the same pointer through the code but when inplementing this the for loop prints the last character. I...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.