当我减小浏览器窗口的宽度时，尽管使用了 max-width 命令，fieldset 中的 select 元素的尺寸并没有减小:

<fieldset style="background:blue;">
<select name=countries style="max-width:90%;">
 <option value=gs>South Georgia and the South Sandwich Islands</option>
</select>
</fieldset>

但是，这在 fieldset 元素之外完全有效。如何使 select 元素缩小到字段集中的 max-width(百分比)？

注意:我已经测试过 Firefox 12.0 和 Google Chrome。我现在确定这是一个跨浏览器的问题。

说明:请引用this example并注意 fieldset 内的 select 元素与 fieldset 外的另一个元素的行为之间的区别。我想要实现的是让 fieldset 中的 select 元素表现得像 fieldset 元素之外的元素。

最佳答案

问题

这是不可能的，至少如果你只使用 max-width (请参阅下面的解决方案)。 <select> s 始终是 little bit tricky to style ，因为它们是 interactive content elements 和形成控制元素。因此，他们必须遵循一些隐含的规则。首先，在使用 max-width 时，您不能使选择宽度小于其选项之一。 .想想以下场景:

+------------------------------------+-+
|Another entry                       |v|
+------------------------------------+-+
|Another entry                         |
|Select box, select anything, please   |
|Another entry                         |
|Another entry                         |
+------------------------------------+-+

Let's say that you want to squeeze this <select> - what will happen? The select's width will get lesser, until...

+------------------------------------+-+   +-----------------------------------+-+
|Another entry                       |v|   |Another entry                      |v|
+------------------------------------+-+   +-----------------------------------+-+
|Another entry                         |   |Another entry                        | 
|Select box, select anything, please   |-->|Select box, select anything, please  | 
|Another entry                         |   |Another entry                        | 
|Another entry                         |   |Another entry                        | 
+------------------------------------+-+   +-----------------------------------+-+ 
                                                   |
           +---------------------------------------+
           v
+----------------------------------+-+   +---------------------------------+-+
|Another entry                     |v|   |Another entry                    |v|
+----------------------------------+-+   +---------------------------------+-+
|Another entry                       |   |Another entry                      | 
|Select box, select anything, please |-->|Select box, select anything, please| 
|Another entry                       |   |Another entry                      | 
|Another entry                       |   |Another entry                      | 
+----------------------------------+-+   +---------------------------------+-+ 

And then the process will stop, as the <option>s wouldn't fit anymore. Keep in mind that you can't style <option>s or at least only a little bit (color, font-variant) without getting some nasty quirks. However, the border-box can be changed, if the select is prepared correctly:

The solution

Use a width value on the select. Yep, it's easy as that:

<fieldset style="background:blue;">
 <select name=countries style="width:100%;max-width:90%;">
  <option value=gs>South Georgia and the South Sandwich Islands</option>
 </select>
</fieldset>

为什么会这样？因为option现在将识别 width的 select正确并且不会强制 select有一个隐含的 min-width .请注意 width很荒谬，因为它不仅仅是max-width .大多数浏览器不会关心和使用 max-width在这种情况下，因为它提供了一个上限。

JSFiddle Demo (适用于 FF12、Chrome 18、IE9、Opera 11.60)

编辑

基于包装器的解决方案，这不会改变原始宽度:

<fieldset style="background:blue;">
<div style="display:inline-block;max-width:90%;"> <!-- additional wrapper -->
 <select name=countries style="width:100%">
  <option value=gs>South Georgia and the South Sandwich Islands</option>
 </select>
</div>
</fieldset>

JSFiddle Demo (适用于上面列出的浏览器)

关于html - 如何使选择元素缩小到字段集中的最大宽度百分比样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10672586/