jQuery UI滑块旁边的文本标签 [英] Text label next to jQuery UI slider

问题描述

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

Inside a parent div, I want to have a text label on the left, and a slider (using jQuery UI) on the right. I wish the slider to take up all the available space.

从概念上讲，我会看到的是：

So conceptually what I'll looking at is:

<div id="parentDiv" style="width:800px">
<span>Unicorn awesomeness:</span><div id="unicornSlider"></div>
</div>

但我不能得到任何容易工作的Chrome，FF3& IE7 / 8。有没有相对整洁的解决方案？

But I can't get anything easily that works on Chrome, FF3 & IE7/8. Is there a relatively neat solution? I will settle for making the slider a fixed width if it substantially makes things easier, even though this is not ideal.

推荐答案

我会尽量让滑块固定宽度，

I think it'd be a lot trickier to get your inline effect without specifying a width

这里有一个使用％width在上述浏览器中工作的例子（IE7是一个

Here's an example using a % width that works in the above mentioned browsers (IE7 was a little off-center in lining up the label and slider but it was still on the same line)

http://jsfiddle.net/pxfunc/D7b7F/

#unicornSlider {float:right;width:80%;}

这篇关于jQuery UI滑块旁边的文本标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！