Brenda, miembro de nuestro equipo, nos ha hecho el favor de redactar este artículo porque controla perfectamente dicho tema.
Solución:
De acuerdo con el modelo de cuadro básico de CSS, el ancho y la altura de un elemento se aplican a su cuadro de contenido. El relleno cae fuera de ese cuadro de contenido y aumenta el tamaño total del elemento.
Como resultado, si configura un elemento con relleno al 100 % de ancho, su relleno lo hará más ancho que el 100 % del elemento que lo contiene. En su contexto, las entradas se vuelven más amplias que su padre.
Puede cambiar la forma en que el modelo de caja trata el relleno y el ancho. Selecciona el box-sizing Propiedad CSS para border-box para evitar que el relleno afecte el ancho o la altura de un elemento:
cuadro de borde : Las propiedades de ancho y alto incluyen el relleno y el borde, pero no el margen… Tenga en cuenta que el relleno y el borde estarán dentro del cuadro.
Tenga en cuenta la compatibilidad del navegador de box-sizing (IE8+).
En el momento de esta edición, no se necesitan prefijos.
Paul Irish y Chris Coyier recomiendan el uso “heredado” a continuación:
html
box-sizing: border-box;
*, *:before, *:after
box-sizing: inherit;
Para referencia, consulte:
* Tamaño de cuadro: cuadro de borde FTW
Heredar el tamaño de la caja Probablemente sea una mejor práctica mejor.
Aquí hay una demostración en su contexto específico:
#mainContainer
line-height: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: rgba(0, 50, 94, 0.2);
margin: 20px auto;
display: table;
-moz-border-radius: 15px;
border-style: solid;
border-color: rgb(40, 40, 40);
border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
border-radius: 2px;
border-radius: 2px 5px / 5px;
box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
.loginForm
width: 320px;
height: 250px;
padding: 10px 15px 25px 15px;
overflow: hidden;
.login-fields > .login-bottom input#login-button_normal
float: right;
padding: 2px 25px;
cursor: pointer;
margin-left: 10px;
.login-fields > .login-bottom input#login-remember
float: left;
margin-right: 3px;
.spacer
padding-bottom: 10px;
input[type=text],
input[type=password]
width: 100%;
height: 30px;
padding: 5px 10px;
background-color: rgb(215, 215, 215);
line-height: 20px;
font-size: 12px;
color: rgb(136, 136, 136);
border-radius: 2px 2px 2px 2px;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
box-sizing: border-box;
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password]
background: rgb(242, 242, 242);
!important;
input[type=submit]:hover
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
.login-top
height: auto;/*85px;*/
.login-bottom
padding: 35px 15px 0 0;
Alternativamente, en lugar de agregar relleno al elementos en sí mismos, el estilo de la elementos que envuelven las entradas. De esa manera, el Los elementos se pueden configurar para width:100% sin verse afectado por ningún acolchado adicional. Ejemplo a continuación:
#login-form
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: rgba(0, 50, 94, 0.2);
margin: 20px auto;
padding: 10px 15px 25px 15px;
border: 4px solid rgb(40, 40, 40);
box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
border-radius: 2px;
width: 320px;
label span
display: block;
padding: .3em 1em;
background-color: rgb(215, 215, 215);
border-radius: .25em;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
margin: 0 0 1em;
label span:hover
background: rgb(242, 242, 242);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
input[type=text],
input[type=password]
background: none;
border: none;
width: 100%;
height: 2em;
line-height: 2em;
font-size: 12px;
color: rgb(136, 136, 136);
outline: none;
.login-bottom
margin: 2em 1em 0 0;
input#login-button
float: right;
padding: 2px 25px;
input#login-remember
float: left;
margin-right: 3px;
Si todo lo anterior falla, intente configurar las siguientes propiedades para su entrada, para que ocupe el máximo espacio pero no se desborde:
input
min-width: 100%;
max-width: 100%;
Las otras respuestas parecen indicarle que codifique el ancho o use un truco específico del navegador. Creo que hay una forma más sencilla.
Calculando el ancho y restando el relleno (lo que provoca la superposición de campos). Los 20 px provienen de 10 px para el relleno izquierdo y 10 px para el relleno derecho.
input[type=text],
input[type=password]
...
width: calc(100% - 20px);
Sección de Reseñas y Valoraciones
Si estás de acuerdo, tienes la libertad de dejar una reseña acerca de qué te ha gustado de esta sección.