Die Grenzen von Textfeldern mit 100 % Breite überwinden
Bei der Webentwicklung stößt man häufig auf das Dilemma, sicherzustellen, dass Textfelder vollständig belegt sind ihre vorgesehene Breite, ohne die Grenzen des Containers zu überschreiten. Das Zuweisen eines CSS-Stils mit „display:block; width: 100 %“ scheint eine einfache Lösung zu sein, kann jedoch aufgrund von Standardrändern, Rahmen und Abständen in Textfeldern zu unerwarteten Problemen führen.
Dies kann passieren Dies führt dazu, dass Textfelder breiter erscheinen als die tatsächliche Containergröße, wie im Beispiel unten zu sehen ist:
<code class="html"><div id="outer">
<div id="inner">
<input type="text" class="wide">
<div style="clear:both;"></div>
</div>
</div></code>Erzielung des gewünschten Effekts
Um dieses Problem zu beheben und sicherzustellen Damit Textfelder die Breite ihres Containers nicht überschreiten, führt CSS3 die Eigenschaft „box-sizing: border-box“ ein. Dadurch wird die Definition von „Breite“ neu definiert, um sowohl den Innenabstand als auch die Außenränder zu umfassen.
Aufgrund der Weiterentwicklung von CSS3 trägt diese Eigenschaft derzeit jedoch in verschiedenen Browsern unterschiedliche Namen:
<code class="css">input.wide {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}</code>Alternativer Ansatz für ältere Browser
Wenn die Browserkompatibilität ein Problem darstellt, besteht ein alternativer Ansatz darin, „padding-right“ zum enthaltenden
Das obige ist der detaillierte Inhalt vonWie erstelle ich Textfelder mit einer Breite von 100 %, ohne dass ihr Container überläuft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
