Establezca el ancho de un `<fieldset>` con el ancho del elemento que contiene más grande

¿Hay alguna manera de que el ancho de un <fieldset> sea el ancho del campo más grande dentro de él?Establezca el ancho de un `<fieldset>` con el ancho del elemento que contiene más grande

Fuente

2010-10-26 ziiweb

La única forma de navegación cruzada que puedo pensar es hacer que se comporte como una mesa, pero eso no es perfecto para un 'fieldset'. Interesado en ver qué pasa –

¿Puede darnos su opinión sobre si las siguientes soluciones son satisfactorias? –

¿Quieres decir esto: jsFiddle fieldset that is wide as biggest containing input-element

<form action="#" id="test" name="test"> 
    <fieldset> 
     <input type="text" class="first" /> 
     <input type="text" class="second" /> 
     <input type="text" class="third" /> 

    </fieldset> 

</form> 

fieldset{ 
    overflow: hidden; 
    float: left; 
    background-color: #eee; 
} 
input { 
    display: block; 
} 
input.first{ width: 150px; } 
input.second{ width: 200px; } 
input.third { width: 250px; }

Se trata de un conjunto de campos flotante. Si lo quiere de otra manera, háganoslo saber.

Fuente

2010-10-26 09:04:13

Incluso funciona en IE6. Bonito. –

@Pekka Como siempre: crea la magia del desbordamiento: oculta; haz el truco para ti :) –

Simplemente haga su pregunta en un contexto general. Un <fieldset> es un elemento de bloque, por lo que su comportamiento predeterminado es expandirse para llenar el espacio horizontal disponible. Por lo tanto, básicamente tiene dos opciones:

Establezca un nuevo ancho explícito.
Cambie su diseño de block a otra cosa.

Aquí está un ejemplo rápido:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"><!-- 
fieldset.explicit-width{ 
    width: 1%; /* Will expand to fit content */ 
} 
fieldset.inline-block{ 
    display: inline-block; 
} 
--></style> 
</head> 
<body> 

<fieldset><legend>Unstyled</legend> 
    <p><input type="text" size="2"></p> 
    <p><input type="text" size="20"></p> 
    <p><input type="text" size="50"></p> 
    <p><input type="text" size="30"></p> 
</fieldset> 

<fieldset class="explicit-width"><legend>Explicit width</legend> 
    <p><input type="text" size="2"></p> 
    <p><input type="text" size="20"></p> 
    <p><input type="text" size="50"></p> 
    <p><input type="text" size="30"></p> 
</fieldset> 

<fieldset class="inline-block"><legend>Inline-block</legend> 
    <p><input type="text" size="2"></p> 
    <p><input type="text" size="20"></p> 
    <p><input type="text" size="50"></p> 
    <p><input type="text" size="30"></p> 
</fieldset> 

</body> 
</html>

Actualización: me olvidó mencionar que la flotación de un elemento en bloque también cambia su trazado.

Fuente

2010-10-26 09:08:13

Establezca el ancho de un `<fieldset>` con el ancho del elemento que contiene más grande

Respuesta

Cuestiones relacionadas