javascript - 如何让两个垂直的 jQuery UI 进度条彼此相邻？

Question

我有两个进度条，在单个 div 中使用 jQuery UI(通过分割 div)。我还使用 jQuery UI 进度条代码的修改版本(取自 this forum thread)管理它们垂直绘制。但它们并没有像预期的那样被绘制在一起。

这是我设置它们的代码:

function drawVBar(self,average,eid)
{
var mainid="#"+eid;
var target = $ ("#" + eid),
first= target.find(".first"),
second= target.find(".second");
if(!first[0])
{
    first= $("<div>").addClass("first").appendTo(target);
    second= $("<div>").addClass("second").appendTo(target);         
}
first.progressbar({value: self,orientation: 'vertical'});

second.progressbar({value: average,orientation: 'vertical'});
}   

谁能告诉我如何设置它们的样式以便它们彼此相邻显示？

Answer 1

如果它们被包装在一个 div 中，那么您可以尝试 float:left，或者甚至可能是 display:inline。如果您让它们 float 并且弄乱了您的页面布局，请尝试使用 overflow:auto

将它们包装在一个 div 中

function drawVBar(self,average,eid)
{
var mainid="#"+eid;
var target = $ ("#" + eid),
first= target.find(".first"),
second= target.find(".second");
if(!first[0])
{
    first= $("<div style='float:left'>").addClass("first").appendTo(target);
    second= $("<div style='float:left'>").addClass("second").appendTo(target);         
}
first.progressbar({value: self,orientation: 'vertical'});

second.progressbar({value: average,orientation: 'vertical'});
}