J'essaie de créer un formulaire de connexion constitué de deux champs d'entrée avec un remplissage en incrustation, mais ces deux champs finissent toujours par dépasser les limites de son parent; le problème provient de l'ajout encart rembourrage. Que pourrait-on faire pour remédier à ce problème?
Extrait JSFiddle: http://jsfiddle.net/4x2KP/
NB: Le code n'est peut-être pas à son niveau le plus propre. Par exemple, l'élément span qui encapsule les entrées de texte peut ne pas être du tout nécessaire.
#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;
}
/* ELEMENT OF INTEREST HERE! */
input[type=text],
input[type=password] {
width: 100%;
height: 20px;
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);
}
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);
} <div id="mainContainer">
<div id="login" class="loginForm">
<div class="login-top">
</div>
<form class="login-fields" onsubmit="alert('test'); return false;">
<div id="login-email" class="login-field">
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
<span><input name="email" id="email" type="text"></input></span>
</div>
<div class="spacer"></div>
<div id="login-password" class="login-field">
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
<span><input name="password" id="password" type="password"></input></span>
</div>
<div class="login-bottom">
<input type="checkbox" name="remember" id="login-remember"></input>
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>
</div>
</form>
</div>
</div>
box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;Si tout ce qui précède échoue, essayez de définir les propriétés suivantes pour votre entrée, pour qu'elle prenne un maximum d'espace mais ne déborde pas:
la source
Les autres réponses semblent vous indiquer de coder en dur la largeur ou d'utiliser un hack spécifique au navigateur. Je pense qu'il existe un moyen plus simple.
En calculant la largeur et en soustrayant le remplissage (ce qui provoque le chevauchement des champs). Le 20px vient de 10px pour le rembourrage gauche et 10px pour le rembourrage droit.
la source
min/max-width: 100%;n'a pas,box-sizing: border-box;n'a pas fait. J'imagine que mettre tout mon site dans un conteneur et lui donner un remplissage fonctionnerait, mais je ne veux pas avoir à le faire uniquement pour cette solution simple.Essayez de changer le
box-sizingenborder-box. L'paddingajoutwidthde votreinputéléments.Voir la démo ici
CSS
+
box-sizingla source
Un rembourrage est ajouté à la largeur totale. Étant donné que votre conteneur a une largeur de pixel, il est préférable de donner également aux entrées une largeur de pixel, mais n'oubliez pas de supprimer le remplissage et la bordure de la largeur que vous avez définie pour éviter le même problème.
la source
J'ai essayé ces solutions mais je n'ai jamais obtenu de résultat concluant. En fin de compte, j'ai utilisé un balisage sémantique approprié avec un fieldset. Cela évitait d'avoir à ajouter des calculs de largeur et tout dimensionnement de boîte.
Il vous permet également de définir la largeur du formulaire selon vos besoins et les entrées restent dans le remplissage dont vous avez besoin pour vos bords.
Dans cet exemple, j'ai placé une bordure sur le formulaire et le jeu de champs et un arrière-plan opaque sur la légende et le jeu de champs afin que vous puissiez voir comment ils se chevauchent et s'articulent les uns avec les autres.
la source
Le remplissage est essentiellement ajouté à la largeur, donc lorsque vous dites
width:100%etpadding: 5px 10pxque vous ajoutez en fait 20 px à la largeur de 100%.la source
Vous avez également une erreur dans votre css avec le point d'exclamation dans cette ligne:
retirez le point-virgule avant. Cependant,! Important doit être utilisé rarement et peut être largement évité.
la source
Voulez-vous que les champs de saisie soient centrés? Une astuce pour centrer les éléments: spécifiez la largeur de l'élément et définissez la marge sur auto, par exemple:
Un lien vers votre violon mis à jour:
http://jsfiddle.net/4x2KP/5/
la source