html - div - Entrada con pantalla: el bloque no es un bloque, ¿por qué no?
title html css (6)
Echa un vistazo a lo que se me ocurrió, una solución que usa el box-sizing:border-box relativamente desconocido box-sizing:border-box estilo de 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 es compatible con 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.
¿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, ¿no deberían el div y la entrada tener dimensiones idénticas?
¿Cómo obtengo la entrada para llenar el ancho? El ancho del 100% no funcionará, porque la entrada tiene relleno y un borde (lo que provoca un ancho final de 1 píxel + 5 píxeles + 100% + 5 píxeles + 1 píxel). Los anchos fijos no son una opción, y estoy buscando algo más flexible.
Prefiero una respuesta directa a una solución alternativa. Esto parece una peculiaridad de CSS y su comprensión 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 soluciones temporales de wrapper. Además de este atornillar con la semántica de la página y las relaciones del selector de CSS, estoy tratando de comprender la naturaleza del problema y si se puede superar cambiando la naturaleza de la ENTRADA.
Ok, esto es VERDADERAMENTE extraño! Descubrí que la solución es simplemente agregar max-width:100% a una entrada con width:100%;padding:5px; . Sin embargo, esto genera aún más preguntas (que formularé en otra pregunta), pero parece que el ancho usa el modelo de caja de CSS normal y el ancho máximo usa el modelo de caja de borde de Internet Explorer. Qué extraño.
Ok, ese último parece ser un error en Firefox 3. Internet Explorer 8 y Safari 4 limitan el ancho máximo al 100% + relleno + borde, que es lo que dice la especificación para hacer. Finalmente, Internet Explorer obtuvo algo bueno.
Dios mío, ¡esto es increíble! En el proceso de jugar con esto, y con la ayuda de los venerables gurús Dean Edwards y Erik Arvidsson , logré juntar tres soluciones separadas para hacer un verdadero ancho de navegador cruzado de 100% en elementos con relleno y bordes arbitrarios. Ver 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.
La razón por la que esto sucede es que el tamaño de una entrada de texto está determinado por su atributo de tamaño. agregue size = "50" dentro de la etiqueta <input>. Luego cámbialo a size = "100" - ¿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 complicado.
Podrías fingir, 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>
Prueba esto:
form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }
Su mejor opción es envolver la entrada en un div con su borde, márgenes, etc., y tener la entrada dentro con un ancho del 100% y sin bordes, 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>
También puedes fingir, 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>