有没有办法使字段集的宽度只和它们中的控件一样宽？

小开

You can always use CSS to constrain the width of the fieldset, which would also constrain the controls inside.

I find that I often have to constrain the width of select controls, or else really long option text will make it totally unmanageable.

小开

最佳答案

Use display: inline-block, though you need to wrap it inside a DIV to keep it from actually displaying inline. Tested in Safari.

<style type="text/css">
.fieldset-auto-width {
display: inline-block;
}
</style>
<div>
<fieldset class="fieldset-auto-width">
<legend>Blah</legend>
...
</fieldset>
</div>

小开

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.

小开

fieldset {display:inline} or 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.

小开

This also works.

fieldset {
width:0px;
}

小开

Unfortunately neither display:inline-block nor width:0px works 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.

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:both on the element that follows the form. Of course, it will be very obvious if you forget ;-)

小开

You can also put the fieldset inside a table, like so:

<table>
<tr>
<td>
<fieldset>
.......
</fieldset>
</td>
</tr>
</table>

小开

Going further of Mihai solution, cross-browser left aligned:

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

小开

            <table style="position: relative; top: -0px; left: 0px;">
<tr>
<td>
<div>
<fieldset style="width:0px">
<legend>A legend</legend>
<br/>
<table cellspacing="0" align="left">
<tbody>
<tr>
<td align='left' style="white-space: nowrap;">
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</td>
</tr>
</table>

小开

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

小开

 fieldset {


min-width: 0;


max-width: 100%;


width: 100%;
}

小开

try this

<fieldset>
<legend style="max-width: max-content;" >Blah</legend>
</fieldset>