Entrada con pantalla: block no es un bloque, ¿por qué no?
¿Por qué display:block;width:auto; en mi entrada de texto no se comporta como un div y llena el ancho del contenedor?
Tenía la impresión de que un div es simplemente un elemento de bloque con ancho automático. En el siguiente código, ¿el div y la entrada no deberían tener dimensiones idénticas?
¿Cómo obtengo la entrada para rellenar el ancho? 100% ancho no funcionará, porque la entrada tiene relleno y un borde (causando un ancho final de 1 píxel + 5 píxeles + 100% + 5 píxeles + 1 píxeles). Los anchos fijos no son una opción, y Estoy buscando algo más flexible.
Preferiría una respuesta directa a una solución. Esto parece una peculiaridad de CSS y entenderlo puede ser útil más adelante.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
div, input {
border: 1px solid red;
height: 5px;
padding: 5px;
}
input, form {
display: block;
width: auto;
}
</style>
</head>
<body>
<div></div>
<form>
<input type="text" name="foo" />
</form>
</body>
</html>
Debo señalar que ya puedo hacer esto con wrapper workarounds. Aparte de este atornillado con la semántica de la página y las relaciones de selector de CSS, estoy tratando de entender la naturaleza del problema y si se puede superar cambiando la naturaleza de la ENTRADA en sí.
Ok, esto es REALMENTE extraño! He encontrado que la solución es simplemente agregar max-width:100% a una entrada con width:100%;padding:5px;. Sin embargo, esto plantea aún más preguntas (que haré en una pregunta separada), pero parece que width utiliza el modelo normal de caja CSS y max-width utiliza el modelo de caja de borde de Internet Explorer. Qué extraño.
Ok, este último parece ser un error en Firefox 3. Internet Explorer 8 y Safari 4 limitan el ancho máximo a 100% + relleno + borde que es lo que la especificación dice que haga. Finalmente, Internet Explorer consiguió algo correcto.
¡Oh, Dios mío, esto es increíble! En el proceso de jugar con esto, y con mucha ayuda de los venerables gurús Dean Edwards y Erik Arvidsson, logré juntar tres soluciones separadas para hacer un ancho 100% de cross-browser en elementos con relleno y bordes arbitrarios. Consulte la respuesta a continuación. Esta solución no requiere ningún marcado HTML adicional, solo una clase (o selector) y un comportamiento opcional para Internet Explorer heredado.
6 answers
Echa un vistazo a lo que se me ocurrió, una solución que utiliza el relativamente desconocido estilo box-sizing:border-box de CSS 3. Esto permite un ancho' verdadero' del 100% en cualquier elemento independientemente del relleno y/o bordes de esos elementos.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Cross-browser CSS box-sizing:border-box</title>
<style type="text/css">
form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}
/* The voodoo starts here */
.bb {
box-sizing: border-box; /* CSS 3 rec */
-moz-box-sizing: border-box; /* Firefox 2 */
-ms-box-sizing: border-box; /* Internet Explorer 8 */
-webkit-box-sizing: border-box; /* Safari 3 */
-khtml-box-sizing: border-box; /* Konqueror */
}
</style>
<!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model -->
<!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
</head>
<body>
<form name="foo" action="#">
<div class="bb">div</div>
<input class="bb" size="20" name="bar" value="field">
</form>
</body>
</html>
Esta solución admite Internet Explorer 6 e Internet Explorer 7 a través de un comportamiento escrito por Erik Arvidsson con algunos ajustes de Dean Edwards para admitir porcentajes y otros anchos que no sean píxeles.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-04 11:35:56
La razón por la que esto sucede es que el tamaño de una entrada de texto está determinado por su atributo size. agregue size = " 50 " dentro de la etiqueta . Entonces cámbialo a size = " 100 " see ¿ves lo que quiero decir?
Sospecho que hay una solución mejor, pero la única que me viene a la mente es algo que encontré en la pregunta "Características ocultas de HTML" en SO: Use un div editable por contenido, en lugar de una entrada. Pasar la entrada del usuario al formulario adjunto (si eso es lo que necesita) puede ser un poco difícil.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 10:31:34
Su mejor apuesta es envolver la entrada en un div con su borde, márgenes, etc., y tener la entrada dentro con ancho 100% y sin borde, sin márgenes, etc.
Por ejemplo,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
div {
border: 1px solid red;
padding: 5px;
}
input, form {
display: block;
width: 100%;
}
</style>
</head>
<body>
<form>
<div><input type="text" name="foo" /></div>
</form>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-04 11:30:48
Podrías fingirlo, así:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
div, #inputWrapper {
border: 1px solid red;
}
#topDiv {
padding: 5px;
height: 5px;
}
form {
display: block;
}
#inputWrapper {
overflow: hidden;
height: 15px;
}
input {
display: block;
width: 100%;
border-style: none;
padding-left: 5px;
padding-right: 5px;
height: 15px;
}
</style>
</head>
<body>
<div id="topDiv"></div>
<form>
<div id="inputWrapper">
<input type="text" name="foo" />
</div>
</form>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-06-23 06:00:32
Prueba esto:
form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-06-23 08:48:38
También podrías fingirlo, así:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
.container {
width:90%;
}
.container div{
border: 1px solid red;
padding: 5px;
font-size:12px;
width:100%;
}
input{
width:100%;
border: 1px solid red;
font-size:12px;
padding: 5px;
}
form {
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div class="container">
<div>
asdasd
</div>
<form action="">
<input type="text" name="foo" />
</form>
</div>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-04 11:32:47