Warum funktioniert „width: auto“ für „Elemente“ nicht wie erwartet?

width:auto für Felder

In CSS bedeutet width:auto für Elemente auf Blockebene im Allgemeinen, dass die Breite erweitert wird, um den verfügbaren Platz auszufüllen. Dieses Verhalten gilt jedoch nicht für Elemente.

Was macht width:auto für s?

Das Standardgrößenattribut eines Element bestimmt seine anfängliche Breite. width:auto setzt lediglich die Breite des auf die Standardgröße.

Erzielen des gewünschten Verhaltens

Um einen Um 100 % der verfügbaren Breite zu belegen, verwenden Sie width:100 % anstelle von width:auto. Allerdings kann es aufgrund von Browservariationen bei der Rahmendarstellung zu Inkonsistenzen kommen.

Alternativer Ansatz

Eine andere Methode, um die verfügbare Breite für s zu füllen, ist das Entfernen das Größenattribut und geben Sie Folgendes an:

<code class="css">input {
  width: 100%;
  margin: -3px;
  border: 2px inset #eee;
}</code>

Dieser Ansatz eliminiert die Standardbreite und sorgt für ein konsistentes Verhalten in allen Browsern. Es werden 3 Pixel vom Rand abgezogen, um die Breite und den Einzug des Rahmens zu korrigieren.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „width: auto“ für „Elemente“ nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!