Wie bekomme ich ein „Element', um den verfügbaren Platz mit „width: auto' zu füllen?

Was bedeutet width: auto für Elemente?

Trotz seines allgemeinen Verständnisses als Anweisung zum Füllen des verfügbaren Platzes für Blockelemente verhält sich width: auto für anders. Felder.

Definition von width: auto

Die CSS-Spezifikation definiert nicht explizit das spezifische Verhalten von width: auto für Elemente. Im Allgemeinen bedeutet dies jedoch, dass der Browser die Breite basierend auf den intrinsischen Eigenschaften eines Elements berechnen sollte.

Erzielen des gewünschten Verhaltens für Eingabefelder

Um das erwartete Verhalten beim Füllen zu erreichen Verfügbarer Platz für Felder:

• Versuchen Sie die Breite: 100 %: Dadurch wird die Breite auf den verbleibenden Platz innerhalb des Containers festgelegt, ähnlich dem Verhalten anderer Elemente auf Blockebene.

Wenn width: 100 % fehlschlägt:

Dies kann am Standardgrößenattribut liegen, das die Größe des Eingabebereichs definiert. Um dies zu überschreiben, entfernen Sie das Größenattribut oder setzen Sie es auf eine leere Zeichenfolge (z. B. size="").

Beispiel mit Breite: 100 %:

<code class="html"><form style="width: 200px; background: khaki">
  <input style="width: 100%" />
</form></code>

Teillösung mit Rändern und Rändern:

Für eine genauere Lösung fügen Sie dem Eingabefeld negative Ränder und eingefügte Ränder hinzu, wie in diesem Code gezeigt:

<code class="html"><div style="padding: 30px; width: 200px; background: red">
  <form style="width: 200px; background: blue; padding: 3px">
    <input style="width: 100%; margin: -3px; border: 2px inset #eee" />
  </form>
</div></code>

Das obige ist der detaillierte Inhalt vonWie bekomme ich ein „Element', um den verfügbaren Platz mit „width: auto' zu füllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!