CSS-Eingabe mit Breite: 100% gehen über die Grenzen der Eltern hinaus

172

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>
Erweitern Sie das Snippet

css  forms  input  width 
— schälen
quelle

Antworten:

310

Verwenden Sie die CSS-Definition box-sizing:border-box, um zu verhindern, dass das Auffüllen die Breite oder Höhe eines Elements beeinflusst. Siehe box-sizing.

Rahmenfeld : Die Eigenschaften für Breite und Höhe umfassen den Abstand und den Rand, jedoch nicht den Rand ... Beachten Sie, dass sich der Abstand und der Rand innerhalb des Felds befinden.

input[type=text],
input[type=password] {
    box-sizing : border-box;
}

Bitte beachten Sie die Browserkompatibilität vonbox-sizing (IE8 +).
Zum Zeitpunkt dieser Bearbeitung sind keine Präfixe erforderlich. siehe shouldiprefix.com .

Hier ist eine Demonstration:

#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;
}
<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" /></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" /></span>
      </div>
      <div class="login-bottom">
        <input type="checkbox" name="remember" id="login-remember" />
        <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" />
      </div>
    </form>
  </div>
</div>
Erweitern Sie das Snippet

Alternativ können Sie die <input>Elemente, die <span>die Eingaben umschließen, formatieren, anstatt den Elementen selbst Auffüllungen hinzuzufügen . Auf diese Weise können die <input>Elemente so eingestellt werden, width:100%dass sie nicht durch zusätzliche Polsterung beeinträchtigt werden. Beispiel unten:

Code-Snippet anzeigen

— showdev
quelle
1
Dies scheint den Job zu machen. Vielen Dank, Sie haben mir viel Zeit gespart.
— Peelz
2
Um Ihren ersten Teil zu erweitern:box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
— Bradmage
Sie machen meinen Tag Kumpel ... kleine CSS, aber sehr wichtig :)
— Gourav Makhija
18

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:

input {
    min-width: 100%;
    max-width: 100%;
}
— Deiu
quelle
1
Dies ist, was für mich sehr einfache Lösung
— funktioniert,
13

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.

input[type=text],
input[type=password] {
    ...
    width: calc(100% - 20px);
}
— Al Zziwa
quelle
3
Kann ich nicht glauben, dass ich das noch nie gesehen habe? Passte perfekt zu meinem Anwendungsfall, während die anderen Antworten dies nicht taten. danke
— rob
Hat für mich gearbeitet. 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.
— SUM1
4

Versuchen Sie, das box-sizingzu ändern border-box. Das paddingfügt widthIhren inputElementen hinzu.

Siehe Demo hier

CSS

input[type=text],
input[type=password] {
    width: 100%;
    margin-top: 5px;
    height: 25px;
    ...
}

input {
    box-sizing: border-box;
}

+box-sizing

— Sourabh
quelle
2

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.

— ralph.m
quelle
1

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.

<html>
  <head>
  <style>
    form {
      width: 300px;
      margin: 0 auto;
      border: 1px solid;
    }
    fieldset {
      border: 0;
      margin: 0;
      padding: 0 20px 10px;
      border: 1px solid blue;
      background: rgba(0,0,0,.2);
    }
    legend {
      background: rgba(0,0,0,.2);
      width: 100%;
      margin: 0 -20px;
      padding: 2px 20px;
      color: $col1;
      border: 0;
    }
    input[type="email"],
    input[type="password"],
    button {
      width: 100%;
      margin: 0 0 10px;
      padding: 0 10px;
    }
    input[type="email"],
    input[type="password"] {
      line-height: 22px;
      font-size: 16px;
    }
    button {
    line-height: 26px;
    font-size: 20px;
    }
  </style>
  </head>
  <body>
  <form>
      <fieldset>
          <legend>Log in</legend>
          <p>You may need some content here, a message?</p>
          <input type="email" id="email" name="email" placeholder="Email" value=""/>
          <input type="password" id="password" name="password" placeholder="password" value=""/>
          <button type="submit">Login</button>
      </fieldset>
  </form>
  </body>
</html>
— Jason Merry
quelle
0

Polsterung ist im Wesentlichen der Breite hinzugefügt, also wenn Sie sagen , width:100%und padding: 5px 10pxSie tatsächlich Zugabe von 20px auf die Breite von 100%.

— n00dle
quelle
1
Und wie könnte ich dieses Problem beheben? Ich habe viele Dinge seit Stunden versucht: /
— Peelz
Entfernen Sie die 100% -Breite. Dies ist nicht erforderlich, da die Eingaben Inline-Block-Elemente sind.
— Andy G
0

Sie haben auch einen Fehler in Ihrem CSS mit dem Ausrufezeichen in dieser Zeile:

background:rgb(242, 242, 242);!important;

Entfernen Sie das Semikolon davor. Wichtig sollte jedoch selten verwendet werden und kann weitgehend vermieden werden.

— Andy G.
quelle
Ah danke, ich muss es verpasst haben, außerdem war das! Wichtige Tag nicht einmal erforderlich.
— Peelz
-1

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.

margin : 0px auto;
width:300px

Ein Link zu Ihrer aktualisierten Geige:

http://jsfiddle.net/4x2KP/5/

— Monika
quelle
Nicht wirklich, ich versuche, sie auf die automatische Größe von ".loginForm" zu bringen. ZB: jsfiddle.net/4x2KP/7
— Peelz
Sie können die Breite von .loginForm ändern und die Eingaben sollten zentriert bleiben
— monika
Ja, das funktioniert, aber ich habe aus einem Grund "Einfügung" hinzugefügt: Ich möchte nicht, dass der Text "sofort von vorne" beginnt. Siehe dieses Bild: d.pr/i/xSH1 (Vergleichen Sie die E-Mail-Eingabe mit dem Passwort eins)
— Peelz
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.