Czy istnieje sposób, aby szerokość zestawu pól była tak szeroka, jak szerokość kontrolek w nich?

Wygląda na to, że zestaw pól domyślnie przyjmuje 100% szerokości swojego kontenera. Czy jest jakiś sposób, aby ustawić pole tak duże, jak najszersza kontrolka w zestawie pól?

Użyj display: inline-block, chociaż musisz owinąć go wewnątrz DIV, aby nie wyświetlał się w tekście. Przetestowano w 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} lub fieldset {display:inline-block}

Jeśli chcesz oddzielić pionowo dwa zestawy pól, użyj jednego <br/>między nimi. Jest to poprawne semantycznie i nie trudniejsze, niż powinno.

Mógłbyś go unieść, wtedy będzie tak szeroki, jak jego zawartość, ale musisz się upewnić, że wyczyścisz te elementy.

To też działa. 

fieldset {
  width:0px;
}

Niestety ani display:inline-blocknie width:0pxdziała w Internet Explorerze do wersji 8. Nie próbowałem Internet Explorera 9. Tak jak chciałbym zignorować Internet Explorera, nie mogę.

Jedyną opcją, która działa w przeglądarkach Firefox i Internet Explorer 8, jest float:left. Jedyną drobną wadą jest to, że trzeba pamiętać o zastosowaniu clear:bothna elemencie podążającym za formą. Oczywiście będzie to bardzo oczywiste, jeśli zapomnisz ;-)

Zawsze możesz użyć CSS, aby ograniczyć szerokość zestawu pól, co również ograniczy wewnętrzne elementy sterujące.

Uważam, że często muszę ograniczać szerokość selectkontrolek, w przeciwnym razie naprawdę długi tekst opcji sprawi, że będzie to całkowicie niemożliwe do zarządzania.

 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

Spróbuj tego

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

naprawiłem mój problem, zastępując styl legendy jak poniżej

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

Idąc dalej z rozwiązaniem Mihai, wyrównane do lewej w różnych przeglądarkach:

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

Wyrównanie do prawej w różnych przeglądarkach:

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

Możesz również umieścić zestaw pól wewnątrz tabeli, na przykład:

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