Ich versuche, ein Anmeldeformular zu erstellen, das aus zwei Eingabefeldern mit einem eingefügten Abstand besteht, aber diese beiden Felder überschreiten immer die Grenzen der übergeordneten Felder. das Problem ergibt sich aus dem zusätzlichen Einsatz Polsterung. Was könnte getan werden, um dieses Problem zu beheben?
JSFiddle-Snippet: http://jsfiddle.net/4x2KP/
NB: Der Code ist möglicherweise nicht am saubersten. Beispielsweise wird das span-Element, das die Texteingaben kapselt, möglicherweise überhaupt nicht benötigt.
#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;Wenn alle oben genannten Fehler auftreten, versuchen Sie, die folgenden Eigenschaften für Ihre Eingabe festzulegen, damit sie maximal Speicherplatz beansprucht, aber nicht überläuft:
quelle
Die anderen Antworten scheinen Ihnen zu sagen, dass Sie die Breite fest codieren oder einen browserspezifischen Hack verwenden sollen. Ich denke, es gibt einen einfacheren Weg.
Durch Berechnen der Breite und Subtrahieren der Polsterung (was die Feldüberlappung verursacht). Der 20px kommt von 10px für die linke Polsterung und 10px für die rechte Polsterung.
quelle
min/max-width: 100%;nicht,box-sizing: border-box;nicht. Ich stelle mir vor, meine gesamte Site in einen Container zu packen und sie aufzufüllen, würde funktionieren, aber ich möchte das nicht nur für diese einfache Lösung tun müssen.Versuchen Sie, das
box-sizingzu ändernborder-box. DaspaddingfügtwidthIhreninputElementen hinzu.Siehe Demo hier
CSS
+
box-sizingquelle
Die Polsterung wird zur Gesamtbreite hinzugefügt. Da Ihr Container eine Pixelbreite hat, sollten Sie den Eingaben auch eine Pixelbreite geben. Denken Sie jedoch daran, den Abstand und den Rand von der von Ihnen festgelegten Breite zu entfernen, um dasselbe Problem zu vermeiden.
quelle
Ich habe diese Lösungen ausprobiert, aber nie ein schlüssiges Ergebnis erzielt. Am Ende habe ich das richtige semantische Markup mit einem Feldset verwendet. Es ersparte das Hinzufügen von Breitenberechnungen und Boxgrößen.
Außerdem können Sie die Formularbreite nach Bedarf einstellen und die Eingaben bleiben innerhalb des für Ihre Kanten erforderlichen Abstandes.
In diesem Beispiel habe ich das Formular und das Feldset mit einem Rand und die Legende und das Feldset mit einem undurchsichtigen Hintergrund versehen, damit Sie sehen können, wie sie sich überlappen und miteinander sitzen.
quelle
Polsterung ist im Wesentlichen der Breite hinzugefügt, also wenn Sie sagen ,
width:100%undpadding: 5px 10pxSie tatsächlich Zugabe von 20px auf die Breite von 100%.quelle
Sie haben auch einen Fehler in Ihrem CSS mit dem Ausrufezeichen in dieser Zeile:
Entfernen Sie das Semikolon davor. Wichtig sollte jedoch selten verwendet werden und kann weitgehend vermieden werden.
quelle
Möchten Sie, dass die Eingabefelder zentriert werden? Ein Trick zum Zentrieren von Elementen: Geben Sie die Breite des Elements an und setzen Sie den Rand auf Auto, z.
Ein Link zu Ihrer aktualisierten Geige:
http://jsfiddle.net/4x2KP/5/
quelle