Wie erstelle ich Textfelder mit einer Breite von 100 %, ohne dass ihr Container überläuft?

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

hinzuzufügen. oder Element. Dadurch wird der zusätzliche linke und rechte Abstand/Rand in Pixeln kompensiert, den Browser normalerweise Eingaben zuweisen (z. B. 6 Pixel für IE

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!