如何保持SELECT元素的宽度小但OPTION灵活 [英] How to keep width of SELECT Element small but OPTIONs flexible

问题描述

我的下拉列表是动态加载的，有一些选项很长，这使我的页面布局变得糟糕。我希望选择元素的大小很小，但是在展开时允许用户查看所有长选项。为此，我将 SELECT 的宽度设置为固定值，例如 width： 200px;

预期行为/期望行为（适用于Chrome）

IE8中的实际行为

我尝试过：

  select {
 overflow：show; 
} 
选项{
 overflow：show; 
 width：1000px; 
 
  

简化FIDDLE：

http://jsfiddle.net/gCbhq/2/

解决方案

好的。不知道这是否有帮助。我使用的是Jquery Mobile，我的选择按钮只有图标（= 28px）。在IE8上我所有的选项都在28px之内。

我修正了这个问题：

  select {min-width：150px！important; } 
  

但这只能用，因为Jquery Mobile隐藏了选择并将它自己的元素添加到顶部 。

唉，这是一个修复 - http://css-tricks.com/select-cuts-off-options-in-ie-fix/

Problem:

My dropdown is loaded dynamically has some options that are quite long and this is messing up my page layout. I'd like the size of the select element to be small but when expanded, allow the user to see all the long options. To do this I have set the width of the SELECT to a fixed value e.g width:200px;

Expected/Desired Behavior (Works in Chrome)

Actual Behavior in IE8

What I have tried:

select{
    overflow:show;
}
option{
    overflow:show;
    width:1000px;
}

SIMPLIFIED FIDDLE:

http://jsfiddle.net/gCbhq/2/

解决方案

Ok. Not sure if this helps. I'm using Jquery Mobile and my select button is icon-only (= 28px). On IE8 all my options hence where 28px, too.

I fixed it with this:

select { min-width: 150px !important; }

but this only works, because Jquery Mobile hides the select and adds it's own elements "on top".

Alas, here is a fix - http://css-tricks.com/select-cuts-off-options-in-ie-fix/

这篇关于如何保持SELECT元素的宽度小但OPTION灵活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！