Heim  >  Artikel  >  Web-Frontend  >  Wie kann verhindert werden, dass breite Textfelder über ihre Container hinausragen?

Wie kann verhindert werden, dass breite Textfelder über ihre Container hinausragen?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-30 21:47:02159Durchsuche

How to Prevent Wide Text Boxes from Extending Beyond Their Containers?

Verhindern, dass breite Textfelder Container überdehnen

Beim Versuch, ein Textfeld zu erstellen, das sich über die gesamte Breite eines Containers erstreckt, tritt ein häufiges Problem auf: die tatsächliche Breite von Das Textfeld kann über die Grenzen des Containers hinausragen. Dies liegt daran, dass Browser standardmäßig Ränder, Rahmen und Innenabstände zuweisen, wodurch die Gesamtbreite des Textfelds effektiv vergrößert wird.

Betrachten Sie das folgende Beispiel:

<code class="html"><div id="outer">
  <div id="inner">
    <input type="text" class="wide" />
    <input type="text" class="normal" />
    <div style="clear:both;"></div>
  </div>
</div></code>
<code class="css">#outer {
  border: 1px solid #000;
  width: 320px;
  margin: 0px;
  padding: 0px;
}
#inner {
  margin: 20px;
  padding: 20px;
  background: #999;
  border: 1px solid #000;
}
input.wide {
  display: block;
  margin: 0px;
  width: 100%;
}
input.normal {
  display: block;
  float: right;
}</code>

In diesem Szenario Das Textfeld der Klasse „breit“ reicht über den Container hinaus, während das Textfeld der Klasse „normal“ genau am Rand des Containers ausgerichtet ist. Um eine Überdehnung zu verhindern, bietet die in CSS3 eingeführte Eigenschaft „box-sizing“ eine Lösung.

<code class="css">input.wide {
  display: block;
  margin: 0px;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}</code>

Durch die Einstellung von „box-sizing“ auf „border-box“ wird die Breite des Textfelds definiert Dazu gehören Außenpolsterung und Ränder. Dadurch wird sichergestellt, dass das Textfeld die gesamte Breite seines Containers einnimmt, ohne über dessen Grenzen hinauszuragen.

Da es sich bei „box-sizing“ um eine CSS3-Eigenschaft handelt, kann die Browserkompatibilität leider variieren. Während der Spezifikationsprozess noch andauert, haben Browser verschiedene temporäre Namen dafür übernommen: „moz-box-sizing“ für Mozilla und „webkit-box-sizing“ für WebKit-basierte Browser.

Ein alternativer Ansatz für ältere Bei Browsern wird „padding-right“ auf das übergeordnete Element angewendet (z. B. ein „div“ oder „td“). Dies kann dazu beitragen, den zusätzlichen Platz auszugleichen, der durch Standardabstände und -ränder im Eingabeelement eingenommen wird. Allerdings kann die erforderliche Menge an „padding-right“ je nach verwendetem Browser variieren.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass breite Textfelder über ihre Container hinausragen?. 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