Html 有没有办法让字段集宽度只与其中的控件一样宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2302495/
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
Is there any way to have a fieldset width only be as wide as the controls in them?
提问by leora
It seems that fieldset defaults to 100% width of its container. Is there any way that you can have the field set just be as big as the widest control inside the fieldset?
似乎 fieldset 默认为其容器的 100% 宽度。有什么方法可以让字段集与字段集内最宽的控件一样大？
回答by tvanfosson
Use display: inline-block, though you need to wrap it inside a DIV to keep it from actually displaying inline. Tested in Safari.
使用display: inline-block，但您需要将其包装在 DIV 中以防止它实际显示内联。在 Safari 中测试。
<style type="text/css">
.fieldset-auto-width {
display: inline-block;
}
</style>
<div>
<fieldset class="fieldset-auto-width">
<legend>Blah</legend>
...
</fieldset>
</div>
回答by leora
fieldset {display:inline}or fieldset {display:inline-block}
fieldset {display:inline}或者 fieldset {display:inline-block}
If you want to separate two fieldsets vertically, use a single <br/>between them. This is semantically correct and no harder than it has to be.
如果要垂直分隔两个字段集，请<br/>在它们之间使用单个字段集。这在语义上是正确的，并不比它必须的更难。
回答by Tom
You could float it, then it will only be as wide as its contents, but you'll have to make sure you clear those floats.
您可以浮动它，然后它的宽度将与其内容一样宽，但您必须确保清除这些浮动。
回答by dan.s.ward
This also works.
这也有效。
fieldset {
width:0px;
}
回答by Paul D
Unfortunately neither display:inline-blocknor width:0pxworks in Internet Explorer up to version 8. I have not tried Internet Explorer 9. Much as I would like to ignore Internet Explorer, I can't.
不幸的是display:inline-block，width:0px在版本 8 之前的 Internet Explorer 中既不能使用也不能使用。我还没有尝试过 Internet Explorer 9。尽管我想忽略 Internet Explorer，但我不能。
The only option that works on Firefox and Internet Explorer 8 is float:left. The only slight drawback is that you have to remember to use clear:bothon the element that follows the form. Of course, it will be very obvious if you forget ;-)
唯一适用于 Firefox 和 Internet Explorer 8 的选项是float:left. 唯一的小缺点是你必须记住clear:both在表单后面的元素上使用。当然，如果你忘记了，那就很明显了;-)
回答by Jonathan Julian
You can always use CSS to constrain the width of the fieldset, which would also constrain the controls inside.
您始终可以使用 CSS 来约束字段集的宽度，这也会约束内部的控件。
I find that I often have to constrain the width of selectcontrols, or else really long option text will make it totally unmanageable.
我发现我经常不得不限制select控件的宽度，否则很长的选项文本将使其完全无法管理。
回答by Trupti
fieldset {
min-width: 0;
max-width: 100%;
width: 100%;
}
回答by Love Kumar
try this
尝试这个
<fieldset>
<legend style="max-width: max-content;" >Blah</legend>
</fieldset>
回答by El Ghandor Yasser
i fixed my issue by override legend style as Below
我通过如下覆盖图例样式解决了我的问题
.ui-fieldset-legend
{
font-size: 1.2em;
font-weight: bold;
display: inline-block;
width: auto;`enter code here`
}
回答by Dgimeno
Going further of Mihai solution, cross-browser left aligned:
更进一步的 Mihai 解决方案，跨浏览器左对齐：
<TABLE>
<TR>
<TD>
<FORM>
<FIELDSET>
...
</FIELDSET>
</FORM>
</TD>
</TR>
</TABLE>
Cross-browser right aligned:
跨浏览器右对齐：
<TABLE>
<TR>
<TD WIDTH=100%></TD>
<TD>
<FORM>
<FIELDSET>
...
</FIELDSET>
</FORM>
</TD>
</TR>
</TABLE>
