Elemento de entrada de HTML más ancho que Containing Div

Question

Tengo un elemento html que está dentro de un div. La altura está dictada por el div externo y la altura y el ancho del control de entrada son del 100%. En el nivel más básico, tengo un problema donde el cuadro de texto se extiende más allá del derecho del div que contiene.

básico código de ejemplo:

<div style="height:25px; width: 150px;"> 
    <input type="text" style="height:100%; width:100%" /> 
</div> 

La prestación de este control es mucho más complejo que esto, pero aún cuando el control se desnudó a este nivel, tengo un problema por el que el cuadro de texto sobresale más allá de la que contiene div.

Answer 1

En lugar de aplicar el estilo directamente en el elemento de entrada, tal vez abstracta del CSS en un archivo y uso de clases:

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
} 

div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 

<div class="field_container"> 
    <input type="text" name="" value="" /> 
</div> 

estoy corriendo por la puerta antes de que pudiera probar si esto ayuda en absoluto, pero como mínimo, podría jugar con la configuración de altura máxima/anchura en DIV css para que no se rompa si mi solución no funciona. Y tener el CSS resumido así hace que los problemas sean más fáciles de resolver usando un complemento como Firebug en Firefox.

Sin embargo, la pregunta es, ¿hay que incluir la etiqueta de entrada en su propia DIV? No me sorprendería si hay un diseño mejor que podría construir que evitaría la necesidad de hacer esto ...

Answer 2

Supongo que quiere que el elemento contenido (<input>) sea más pequeño que, o contenido completamente dentro, el <div>?

Puede:

input {width: 50%; /* or whatever */ } 

ancho Una de html-elemento se calcula (creo) como el ancho definido + fronteras + margen de + acolchado

Si ya ha definido la entrada como tener 100% de ancho del elemento principal y, a continuación, se agregan los otros atributos, definitivamente se desbordará el elemento principal div.

puede establecer el margen/relleno/bordes en 0, pero que probablemente no se vea bien. Por lo tanto, es más fácil, aunque no necesariamente perfecto, solo para usar un ancho adecuadamente más pequeño.

Se podría, por supuesto, utilizar

#parent_div {overflow: hidden; /* or 'auto' or whatever */} 

para ocultar la parte del elemento de entrada que normalmente desbordar el contenedor div.

Answer 3

lamentablemente esto dependerá del navegador con el que esté trabajando, pero establecer el ancho del objeto (el cuadro de texto) no tiene en cuenta el ancho del borde del objeto. la mayoría de los navegadores solo tienen en cuenta cualquier relleno del objeto externo y los márgenes del objeto contenido, pero algunos (estoy viendo IE) no agregan en el borde al calcular porcentajes;

su mejor opción es cambiar la frontera en el cuadro de texto o de tirar en otro div entre teh cuadro de texto y el recipiente con un acolchado de 2 píxeles por ejemplo con un margin-top: -2px y una margin-left:-2px (supongo que en el ancho del borde)

Answer 4

Sé que esta publicación es bastante antigua, pero es un problema común y nadie ha publicado ninguna buena respuesta ...

El siguiente código HTML se ve bien. Pero cuando agrego el tipo de documento, aparece el problema

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
    border: 1px solid red; 
} 
div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 
<div class="field_container"> 
    <input type="text" name="" value="" /> 
</div> 

Para solucionar el problema anchura/altura, se puede agregar relleno a su field_container, pero que hará que el contenedor más grande.

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
    padding-bottom: 6px; 
    padding-right: 4px; 
    border: 1px solid red; 
} 
div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 
<div class="field_container"> 
    <input type="text" name="" value="" /> 
</div> 

Si no puede cambiar el ancho de contenedores, también puede utilizar el siguiente truco, pero que todavía aumentará la altura

div.field_container 
{ 
    height: 25px; 
    width: 150px; 
    padding-bottom: 6px; 
    border: 1px solid red; 
} 
div.field_container input 
{ 
    height: 100%; 
    width: 100%; 
} 
<div class="field_container"> 
    <div style="height: 100%; margin-right:4px"><input type="text" name="" value="" /></div> 
</div> 

Answer 5

cuadro de dimensionamiento Se puede utilizar: caja de frontera para cuida de esto. Sólo hay que poner lo siguiente en su archivo css:

input{box-sizing:border-box} 

Esto significa que rayan en el cuadro de entrada es en realidad dentro de la anchura de la entrada en lugar de ser añadido en la parte exterior. Esto es lo que hace que la entrada sea más grande que el contenedor.

Paul irlandés tiene muy buen post explicando esta técnica http://paulirish.com/2012/box-sizing-border-box-ftw

Los puntos se hace sobre el acolchado también se aplican a la frontera.

Incluso hay una combinación de brújula para que sea más fácil admitir navegadores antiguos. (http://compass-style.org/reference/compass/css3/box_sizing/)

Answer 6

Esto hizo que el trabajo para mí:

input { 
    padding: 0.2em; 
    box-sizing: border-box; 
    width: 100% 
}