Können Textfelder mit einer Breite von 100 % in ihren Containern enthalten sein?

Kontrolle der Textfeldbreite innerhalb von Containern

In der Webentwicklung ist es oft wünschenswert, dass Textfelder die Breite ihrer Container ausfüllen. Allerdings können vom Browser hinzugefügte Ränder, Rahmen und Abstände dazu führen, dass Textfelder mit 100 % Breite über die Grenzen des Containers hinausragen.

Können Textfelder mit 100 % Breite enthalten sein?

Ja, durch die Verwendung der CSS3-Eigenschaft box-sizing: border-box können Sie „width“ neu definieren, um externen Abstand und Rand zu berücksichtigen.

CSS-Implementierung

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Diese Lösung funktioniert, indem sie den zusätzlichen Platz, der durch Polsterung und Rahmen belegt wird, in die Berechnung der Breite des Textfelds einbezieht.

Fallback für Nicht-CSS3-Browser

Für ältere Browser besteht eine Alternative darin, dem umschließenden Container eine bestimmte Menge rechten Abstands hinzuzufügen:

#container {
    padding-right: 6px;
}

Der Abstandsbetrag beträgt normalerweise 6 Pixel für IE-Versionen vor 8.

Das obige ist der detaillierte Inhalt vonKönnen Textfelder mit einer Breite von 100 % in ihren Containern enthalten sein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!