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

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>的行为，除非你使用<div>来模拟一个选择，这是很多JS UI框架所做的事情，比如Dojo。

Answer 2

你可以把三个选择中的每一行放在一个div中，然后像这样给这两个div添加一个类：

.line{
 height: 40px; 
 width: 800px;  
  }


  <div class='line'>
  <select>...</select> <select>...</select>  <select>...</select>   
  </div>  
  <div class='line'>
  <select>...</select> <select>...</select>  <select>...</select>   
  </div>  

Answer 3

建议的自定义选择控件将包装长选项行以适合大小： jquery-keyselect