Question

使用以下标记：

<div style="overflow: auto">
    <select multiple="true" style="min-width: 300px;">
        <option>a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string</option>
    </select>
</div>

min-width导致选择宽度为容器的100％，即它不会溢出。删除最小宽度，使其溢出（这是所需的行为，但我也想要一个最小宽度，以便即使没有选项，框也看起来不错）。

如何实现这一目标？最小宽度影响最大宽度的事实扰乱了我。请注意，我只对css解决方案感兴趣，避免使用javascript。

编辑：为了澄清，样式应该使以下标记呈现一个空盒子，宽度为300px：

<div>
    <select multiple="true">
    </select>
</div>

以下内容用于渲染一个与其容器一样宽的框，并使用滚动条查看其余部分：

<div>
    <select multiple="true">
        <option>a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string</option>
    </select>
</div>

Answer 1

我试图找到一个解决方案，但是当设置选择元素的宽度时，似乎css非常顽固。一旦它具有定义的最小宽度。

我在JS / JQuery中做了一个简单的解决方法，它似乎在我的JSfiddle中工作得很好：http://jsfiddle.net/RHfm4/2/

var v = $("select");
  for(var i = 0; i < v.length; i++){
    if(parseInt($(v[i]).css("width")) < 300){
      $(v[i]).css("width", "300px");
  }
}

这将为您提供所需的功能，但它只是一种解决方法。希望这有点帮助。

Answer 2

希望它可以帮助你...

<div style="min-width:300px; overflow-x: auto">
  <select multiple="true" style="width: auto;">
    <option>a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string</option>
    <option>a long string</option>
    <option>a long string</option>
    <option>a long string</option>                                    
  </select>
</div>

使用min-width和溢出

2 个答案: