如何让<select>框溢出包含的<div>？

Question

背景:

客户要我给他们一些下拉菜单.所以我给了他们一些,有很多不同的选择.

他们喜欢Firefox和Chrome中下拉列表的显示方式,因为下拉列表会自动扩展到文本的宽度,如下所示:

但IE的情况并非如此

Internet Explorer是网络开发世界的哥特式,并且喜欢表现不同,所以它似乎并不被同行看作是顺从者.它没有看到扩展下拉列表以使用户能够读取其包含的所有文本的价值.所以它看起来像这样:

这对客户来说还不够好,所以他们让我解决它.我找到了一个jQuery插件,它会在你给它焦点时调整文本框的大小,这样当它打开时你可以看到它里面的所有文本.这里有一个例子:(一定要在IE8或更低版本中加载)

http://jsfiddle.net/tmcNP/3/

问题:

请注意,当您单击All companies下拉列表时,它会强制下拉到下一行吗？有什么方法可以让它保持在同一条线上,并且'溢出'*从包含的div中出来？

*在这种情况下,不确定这是否是正确的术语.

Answer 1

这是因为插件正在调整大小<select>以匹配<option>其内部最长的部分。不幸的是，解决这个问题的唯一方法是在position:absolute其父级内部进行选择（设置为position:relative）。

实际上，任何内容大于其所能容纳的下拉菜单都会发生这种情况。不幸的是，您无法控制<select>的行为，除非您使用 a 来模拟选择<div>，这是许多 JS UI 框架（例如 Dojo）所做的事情。