Heim  >  Artikel  >  Web-Frontend  >  Können Textfelder mit einer Breite von 100 % in ihren Containern enthalten sein?

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

Barbara Streisand
Barbara StreisandOriginal
2024-10-31 14:25:01289Durchsuche

Can 100% Width Text Boxes Be Contained Within Their Containers?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn