Is there any way to have a fieldset width only be as wide as the controls in them?

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?

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>

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.

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.

Paul D

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

 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

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.

dan.s.ward

This also works.

fieldset {
  width:0px;
}

try this

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

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

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>

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

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

来源：https://stackoverflow.com/questions/2302495/is-there-any-way-to-have-a-fieldset-width-only-be-as-wide-as-the-controls-in-the

标签

html

css

fieldset