使用带溢出的最小宽度答案

【问题标题】：Using min-width with overflow使用带溢出的最小宽度
【发布时间】：2012-06-23 17:29:28
【问题描述】：

使用以下标记：

<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>

【问题讨论】：

我觉得你缺乏信心令人不安
将 width: 300px 添加到您的 div 元素。
给 div 元素添加宽度仍然不会导致选择溢出。

标签： css

【解决方案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");
  }
}

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

【讨论】：

技术上可行，但变得非常丑陋，特别是因为我将使用 javascript 更改列表中的元素，因此每次发生更改时我都必须运行代码！最后，我可能会使用不涉及 min-width 的不同解决方案。
是的，我同意。它不是最佳解决方案。希望你能找到一种可以接受的方法来解决这个问题，这很棘手。

【解决方案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 在 div 上什么也没做，它必须在 select 上。
如果已经溢出，为什么还要在“选择”上设置宽度？
我没有，如果没有选项，我想要选择宽度。即最小宽度。