¿Hay alguna forma de que el ancho de un conjunto de campos sea tan ancho como los controles en ellos?

80

Parece que fieldset tiene por defecto el 100% de ancho de su contenedor. ¿Hay alguna forma de que el conjunto de campos sea tan grande como el control más amplio dentro del conjunto de campos?

html css fieldset leora
fuente

Respuestas:

128

Úselo display: inline-block, aunque debe envolverlo dentro de un DIV para evitar que se muestre en línea. Probado en Safari.

<style type="text/css">
    .fieldset-auto-width {
         display: inline-block;
    }
</style>
<div>
  <fieldset class="fieldset-auto-width">
      <legend>Blah</legend>
      ...
  </fieldset>
</div>
tvanfosson
fuente
4
Esta fue la respuesta más clara para un n00b relativo y resolvió mi problema idéntico. Gracias.
Mawg dice reinstalar a Monica el
Sí, esta es una idea mejor / más simple que mi respuesta si funciona en todos los navegadores que le interesan.
Tom
3
FYI: display: inline-block;no funciona en iE6 e IE7. Feliz si no tienes que preocuparte por ellos. :)
Diemo
¡Funciona muy bien en IE8 y Firefox 10!
Ed Bayiates
¿Qué es el vudú con el div. Parece necesario, pero ¿por qué?
superluminario
14

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

Si desea separar dos conjuntos de campos verticalmente, use uno <br/>entre ellos. Esto es semánticamente correcto y no más difícil de lo que debería ser.

Denilson Sá Maia
fuente
para IE 11, pantalla: trabajo en línea, pero no pantalla: bloque en línea
Gabe Halsmer
8

Podrías flotarlo, entonces solo será tan ancho como su contenido, pero tendrás que asegurarte de despejar esos flotadores.

Tom
fuente
1

Esto también funciona. 

fieldset {
  width:0px;
}
dan.s.ward
fuente
1
Esto no funciona si tiene varios elementos dentro del conjunto de campos que deberían aparecer en la misma línea.
Matthew Schinckel
Claro que sí, si usa un elemento de bloque para envolverlos o una combinación de nowrap y rupturas explícitas.
Dan.s.ward
1

Desafortunadamente, display:inline-blockni width:0pxfunciona en Internet Explorer hasta la versión 8. No he probado Internet Explorer 9. Por mucho que me gustaría ignorar Internet Explorer, no puedo.

La única opción que funciona en Firefox e Internet Explorer 8 es float:left. El único pequeño inconveniente es que hay que recordar utilizarlo clear:bothen el elemento que sigue al formulario. Por supuesto, será muy obvio si lo olvidas ;-)

Pablo D
fuente
0

Siempre puede usar CSS para restringir el ancho del conjunto de campos, lo que también restringiría los controles internos.

Encuentro que a menudo tengo que restringir el ancho de los selectcontroles, o de lo contrario, el texto de opción realmente largo lo hará totalmente inmanejable.

Jonathan Julian
fuente
pero quiero que sea dinámico para que el conjunto de campos se "ajuste automáticamente" y no tenga un ancho predeterminado
leora
0 
 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }
Trupti
fuente
3
Agregue algunas explicaciones
Rarblack
Ni siquiera Tim Berners-Lee podría decirte por qué esto funciona, pero la mierda simplemente funciona lol gracias!
lucasjohnson
0

prueba esto

<fieldset>
   <legend style="max-width: max-content;" >Blah</legend>
</fieldset>
Amor Kumar
fuente
-1

Solucioné mi problema anulando el estilo de leyenda como se muestra a continuación 

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

Yendo más allá de la solución Mihai, alineación a la izquierda en todos los navegadores:

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

Alineado a la derecha en varios navegadores:

<TABLE>
  <TR>
    <TD WIDTH=100%></TD>
    <TD>
      <FORM>
        <FIELDSET>
          ...
        </FIELDSET>
      </FORM>
    </TD>
  </TR>
</TABLE>
Dgimeno
fuente
2
Si bien esto podría funcionar, las tablas generalmente no se consideran una buena práctica para los diseños ... stackoverflow.com/questions/83073/…
StackExchange What The Heck
1
imagina hacer esto para 5 conjuntos de campo? 10? ¡¿¿15??! no lo hagas!
Taylor Brown
1
Para cualquier desarrollador nuevo que venga aquí. No hagas esto. Utilizará 10 veces más código del que necesita.
superluminario
-2 
            <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>
Prakash Bayas
fuente
-3

También puede poner el conjunto de campos dentro de una tabla, así:

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