フィールドセットの幅をその中のコントロールと同じ幅にする方法はありますか？

フィールドセットのデフォルトはコンテナの幅100％のようです。フィールドセットをフィールドセット内の最も広いコントロールと同じ大きさにする方法はありますか？

を使用し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>

fieldset {display:inline} または fieldset {display:inline-block}

2つのフィールドセットを垂直方向に分離する場合は<br/>、それらの間に1つを使用します。これは意味的に正しく、必要以上に難しいことではありません。

あなたはそれを浮かせることができます、そしてそれはその中身と同じくらいの幅になるでしょう、しかしあなたはそれらの浮きを確実に取り除く必要があるでしょう。

これも機能します。 

fieldset {
  width:0px;
}

残念ながら、バージョン8までのInternet Explorerdisplay:inline-blockでもwidth:0px動作しません。私は、Internet Explorer 9を試していません。InternetExplorerを無視したいのですが、できません。

FirefoxとInternetExplorer8で機能する唯一のオプションはfloat:leftです。唯一のわずかな欠点はclear:both、フォームに続く要素で使用することを忘れないでください。もちろん、忘れると非常に明白になります;-)

いつでもCSSを使用してフィールドセットの幅を制限できます。これにより、内部のコントロールも制限されます。

selectコントロールの幅を制限しなければならないことがよくあります。そうしないと、オプションのテキストが非常に長くなり、完全に管理できなくなります。

 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

これを試して

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

凡例スタイルを以下のようにオーバーライドして問題を修正しました

.ui-fieldset-legend
{
  font-size: 1.2em;
  font-weight: bold;
  display: inline-block;
  width: auto;`enter code here`
}

Mihaiソリューションをさらに進めて、クロスブラウザを左揃えにします。

<TABLE>
  <TR>
    <TD>
      <FORM>
        <FIELDSET>
          ...
        </FIELDSET>
      </FORM>
    </TD>
  </TR>
</TABLE>

クロスブラウザは右揃え：

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

次のように、フィールドセットをテーブル内に配置することもできます。

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