html - data - ¿Hay alguna manera de tener un ancho de conjunto de campo solo tan ancho como los controles en ellos?

tooltip div jquery

Question

Parece que Fieldset se predetermina al 100% de ancho de su contenedor. ¿Hay alguna forma de que el campo establecido sea tan grande como el control más amplio dentro del fieldset?

Answer 1

Esto también funciona

fieldset {
width:0px;
}

Answer 2

Lamentablemente, tampoco display:inline-block ni width:0px funciona 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 inconveniente leve es que debe recordar usar clear:both en el elemento que sigue al formulario. Por supuesto, será muy obvio si lo olvidas ;-)

Answer 3

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

Answer 4

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

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

Answer 5

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

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

Answer 6

Yendo más allá de la solución de Mihai, alineados a la izquierda entre navegadores:

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

Cross-browser alineado a la derecha:

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

Answer 7

arreglé mi problema reemplazando el estilo de la leyenda como Abajo

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

Answer 8

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

Si desea separar dos conjuntos de campo verticalmente, use un único <br/> entre ellos. Esto es semánticamente correcto y no más difícil de lo que debe ser.

Answer 9

Use display: inline-block , aunque debe envolverlo dentro de un DIV para evitar que realmente se visualice 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>

Answer 10

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