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

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!