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

Question

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

我希望滑块占据所有可用空间，并且与这个问题不同，父 div 的宽度未知。

所以从概念上讲，它应该是这样的（这里的 jsfiddle尝试失败）：

<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()

我已经更新了你的小提琴以包括这个。（我还必须将父 div 的宽度更改为 90%，因为 100% + padding 比窗口大）。

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