Wie kann ich mithilfe von „width: auto' in CSS dafür sorgen, dass ein „Feld' den verfügbaren Platz ausfüllt?

Breite:auto für Felder

CSS-Anfänger stoßen oft auf Verwirrung, wenn sie die Eigenschaft „width:auto“ auf display:block-Elemente wie anwenden. Felder, da es sich möglicherweise nicht wie erwartet verhält.

Auto-Breite-Definition:

Die CSS-Spezifikation bleibt hinsichtlich der genauen Definition von „width:auto“ unklar und lässt Platz für Verwirrung. Im Allgemeinen bedeutet dies jedoch, dass die Breite des Elements automatisch an seinen Inhalt angepasst wird.

Erzielen des erwarteten Verhaltens für Felder:

Um eine Wenn das Feld wie andere Elemente auf Blockebene den verfügbaren Platz ausfüllt, können die folgenden Schritte ausgeführt werden:

1. Standardgröße überschreiben:

Das Standardgrößenattribut für Felder erzeugt seine Breite. Um dies zu überschreiben, kann „width:100 %“ angewendet werden. Dadurch wird die Breite so eingestellt, dass sie den gesamten verfügbaren Platz des übergeordneten Elements umfasst.

2. Entfernen Sie browserspezifische Rahmenprobleme:

Leider gehen Browser mit Rändern etwas anders um, was zu Inkonsistenzen führt. Um dies zu beheben, kann zusätzliches CSS verwendet werden:

• Wenden Sie negative Ränder an, um der browserspezifischen Randbehandlung entgegenzuwirken.
• Verwenden Sie eingefügte Ränder, um Inkonsistenzen weiter zu verhindern.

Beispielcode:

Der folgende Code zeigt, wie der verfügbare Platz mit einem gefüllt wird. Feld und überwindet gleichzeitig browserspezifische Rahmenprobleme:

<div style="padding:30px;width:200px;background:red">
  <form action="" method="post" style="width:200px;background:blue;padding:3px">
    <input size="" style="width:100%;margin:-3px;border:2px inset #eee" />
    <br /><br />
    <input size="" style="width:100%" />
  </form>
</div>

Es ist zu beachten, dass dieser Code möglicherweise nicht in allen Browsern perfekt ist. Es bietet jedoch eine gute Annäherung an das gewünschte Verhalten und behebt potenzielle browserübergreifende Inkonsistenzen.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von „width: auto' in CSS dafür sorgen, dass ein „Feld' den verfügbaren Platz ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!