jquery滑块旁边的文本标签（在未知宽度的div中）

Question

在父div中，我想在左边有一个文本标签，在右边有一个滑块（使用jQuery UI）。

我希望滑块占用所有可用空间，与this question不同，父div的宽度未知。

所以在概念上它应该是这样的（jsfiddle here尝试破坏）：

<div id="parentDiv" style="width:100%">
<span>Unicorn awesomeness:</span><div id="unicornSlider"></div>
</div>

但我无法轻易获得适用于Chrome，FF3和IE8的内容。有没有人有任何想法？

Answer 1

您可以尝试使用jQuery设置宽度：

$('#unicornSlider')
    .width($('#parentDiv').width() -$('#parentDiv span').width() - 20)
    .slider()

我已更新您的fiddle以包含此内容。 （我还必须将父div的宽度更改为90％，因为100％+填充比窗口大。）

更新：我注意到这会在调整浏览器窗口大小时保持该宽度。您可以使用$(window).resize(function)重新计算宽度。