Html 如何使选择元素在字段集中缩小到最大宽度百分比样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10672586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make select elements shrink to max-width percent style within fieldset
提问by Question Overflow
When I reduce the width of my browser window, selectelements within the fieldsetdoes not reduce in size despite the max-widthcommand:
当我减小浏览器窗口的宽度时，尽管执行了以下命令，但其中的select元素fieldset不会减小尺寸max-width：
<fieldset style="background:blue;">
<select name=countries style="max-width:90%;">
<option value=gs>South Georgia and the South Sandwich Islands</option>
</select>
</fieldset>
However, this works perfectly outside fieldsetelement. How do I make the selectelements shrink to the max-width(percentage) within the fieldset?
但是，这在fieldset元素之外完全有效。如何使select元素缩小到max-width字段集中的（百分比）？
Note:I have tested both Firefox 12.0 and Google Chrome. I am now sure that it is a cross-browser problem.
注意：我已经测试了 Firefox 12.0 和 Google Chrome。我现在确定这是一个跨浏览器的问题。
Clarification: Please refer to this exampleand note the difference between the behaviour of a selectelement inside a fieldsetand another outside the fieldset. What I want to achieve is for the selectelement within the fieldsetto behave like the one outside the fieldsetelement.
说明：请参考此示例并注意 aselect内部元素的行为fieldset与fieldset.外部元素的行为之间的差异。我想要实现的是让内部的select元素fieldset表现得像fieldset元素外部的元素。
回答by Zeta
The problem
问题
This isn't possible, at least if you only use max-width(see below for solution). <select>s are always a little bit tricky to style, as they're interactive content elementsandform control elements. As such, they have to follow some implicit rules. For one, you cannot make a select less wide than one of its options when using max-width. Think of the following scenario:
这是不可能的，至少如果您只使用max-width（见下文解决方案）。<select>s 的样式总是有点棘手，因为它们是交互式内容元素和表单控件元素。因此，他们必须遵循一些隐含的规则。一方面，在使用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...
假设你想挤压这个<select>- 会发生什么？选择的宽度会变小，直到...
+------------------------------------+-+ +-----------------------------------+-+
|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>sor 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:
然后该过程将停止，因为<option>s 不再适合。请记住，您不能<option>s在没有一些讨厌的怪癖的情况下设计样式或至少只有一点点（颜色、字体变体）。但是，如果正确准备了选择，则可以更改边框：
The solution
解决方案
Use a widthvalue on the select. Yep, it's easy as that:
在 上使用一个width值select。是的，就这么简单：
<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>
Why does this work? Because the optionwill now recognize the widthof the selectcorrectly and won't force the selectto have a implicit min-width. Notice that the widthis absurd, as it is more than the max-width. Most browsers won't care and use the max-widthin this case, as it provides an upper bound.
为什么这样做？因为option现在width将select正确识别 的并且不会强制select具有隐式min-width. 请注意，width是荒谬的，因为它不仅仅是max-width。大多数浏览器max-width在这种情况下不会关心和使用，因为它提供了一个上限。
JSFiddle Demo(works in FF12, Chrome 18, IE9, Opera 11.60)
JSFiddle 演示（适用于 FF12、Chrome 18、IE9、Opera 11.60）
Edit
编辑
Wrapper based solution, this won't change the original width:
基于包装的解决方案，这不会改变原始宽度：
<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(works in browsers listed above)
JSFiddle Demo（适用于上面列出的浏览器）
回答by Vivek Chandra
Is thiswhat you're looking for?
是这你在找什么？
<fieldset style="background:blue; display:inline; width:100%;">
<select name=countries style="width:90%;">
<option value=gs>South Georgia and the South Sandwich Islands</option>
</select>
<input name=others style="display:block; min-width:300px; width:90%;">
</fieldset>
Either way, when you specify the width with a value (such as 300px) – this height will take priority and the element will be assigned 300px itself. Define the widthin percentages and give the min-widthas an absolute value. The percentage is taken from its parent element. So, you should give a percentage to its parent too.
无论哪种方式，当您使用一个值（例如 300 像素）指定宽度时，此高度将优先，元素本身将被分配 300 像素。定义width百分比并给出min-width绝对值。百分比取自其父元素。所以，你也应该给它的父级一个百分比。
I hope this helps.
我希望这有帮助。
回答by Tom Pietrosanti
Set the widthof the fieldsetto 100%(or any other value)
设置width的fieldset对100%（或任何其他值）
Tested in Google Chrome.
在谷歌浏览器中测试。
回答by user6167808
Wrap the select. For this example, I'll use a div with "select_wrap".
包裹选择。对于本示例，我将使用带有“select_wrap”的 div。
div.select_wrap {
height: 1em;
}
div.select_wrap select {
position: absolute;
max-width: calc(100% - 6px);
text-overflow: ellipsis;
}
The "absolute" context allows max-width to be interpreted - no actual position information, just force it into a different context. calc() lets you be a bit more detailed with what max-width actually should be, given you don't have margins and padding where they were previously. text-overflow looks nice.
“绝对”上下文允许解释 max-width - 没有实际位置信息，只需将其强制转换为不同的上下文。calc() 可以让您更详细地了解 max-width 实际应该是什么，因为您没有以前的边距和填充。文本溢出看起来不错。
select_wrap's height is needed to make sure the form flows around the select as expected - you need to reserve the space the select formerly filled.
select_wrap 的高度需要确保表单按预期围绕选择流动 - 您需要保留选择以前填充的空间。
回答by kmchen
try:
尝试：
fieldset select{
margin:auto
}