C'è un modo per avere una larghezza del fieldset larga solo quanto i controlli in essi contenuti?

Question

Sembra che il fieldset abbia come valore predefinito il 100% della larghezza del contenitore. C'è un modo per far sì che il field set sia grande quanto il controllo più ampio all'interno del fieldset?

Answer 1

Usa display: inline-block, anche se è necessario avvolgerlo in un DIV per evitare che in realtà la visualizzazione in linea. Testato in Safari.

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

Answer 2

È sempre possibile utilizzare CSS per limitare la larghezza del fieldset, che vincolerebbe anche i controlli interni.

Trovo che debba spesso limitare la larghezza dei controlli select, altrimenti il ​​testo di opzione veramente lungo lo renderà totalmente ingestibile.

Answer 3

Si potrebbe galleggiare, poi sarà solo essere il più ampio il suo contenuto, ma si dovrà fare in modo di cancellare quei carri allegorici.

Answer 4

fieldset {display:inline} o fieldset {display:inline-block}

Se si vuole separare due fieldsets in verticale, utilizzare un unico <br/> tra di loro. Questo è semanticamente corretto e non più difficile di quanto deve essere.

Answer 5

Questo funziona anche.  

fieldset { 
    width:0px; 
} 

Answer 6

Purtroppo né display:inline-block né width:0px opere in Internet Explorer   fino alla versione 8. Non ho provato Internet Explorer     9. Per quanto vorrei ignorare Internet Explorer  , non posso.

L'unica opzione che funziona su Firefox e Internet   Explorer   8 è float:left. L'unico piccolo inconveniente è che devi ricordare di usare clear:both sull'elemento che segue il modulo. Naturalmente, sarà molto evidente se si dimentica ;-)

Answer 7

Si può anche mettere il fieldset all'interno di una tabella, in questo modo:

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

Answer 8

Proseguendo di soluzione di Mihai, cross-browser allineato a sinistra:

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

Cross-browser destro allineato:

<TABLE> 
    <TR> 
    <TD WIDTH=100%></TD> 
    <TD> 
     <FORM> 
     <FIELDSET> 
      ... 
     </FIELDSET> 
     </FORM> 
    </TD> 
    </TR> 
</TABLE> 

Answer 9

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

Answer 10

Ho risolto il mio problema con sostituzione di stile leggenda come qui sotto

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