2

使用以下标记：

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

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

如何做到这一点？min-width 影响 max-width 的事实让我感到不安。请注意，我只对 css 解决方案感兴趣，避免使用 javascript。

编辑：为了澄清，样式应该导致以下标记呈现一个空框，即 300px 宽：

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

以下是渲染一个与其容器一样宽的框，并带有一个滚动条以允许查看其余部分：

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

2 回答 2

2

我试图找到一个解决方案，但是一旦选择元素具有定义的最小宽度，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");
  }
}​​​​​​​

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

于 2012-06-21T23:05:31.350 回答
0

希望它可以帮助你...

<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>
于 2012-06-21T13:45:43.857 回答