Warum werden die Schaltflächen „display: block' und „width: auto' nicht gestreckt, um den Container in Chrome zu füllen?

Warum „display: block“ und „width: auto“ die Schaltflächen zum Füllen des Containers nicht strecken

Bei der Anwendung von „display: block“ und „width: auto“ zu einer Schaltfläche hinzufügen, können Sie davon ausgehen, dass sie sich wie andere Blockelemente dehnt und den Container füllt. Dieses Verhalten tritt jedoch in neueren Versionen von Chrome nicht auf.

Verstehen des Verhaltens

Der Grund für dieses Verhalten liegt in der Klassifizierung von Schaltflächen als „ersetzte Elemente“. " Ersetzte Elemente, zu denen Eingabe-, Auswahl-, Schaltflächen-, IMG-, Objekt- und Textbereichselemente gehören, verfügen über bestimmte Standardanzeigeeigenschaften.

Gemäß CSS-Spezifikationen können ersetzte Elemente intrinsische Abmessungen haben, die durch externe Ressourcen wie Bilder bestimmt werden oder Browser-Steuerelemente. Wenn beispielsweise die Breite eines Bildelements auf „Auto“ eingestellt ist, wird die tatsächliche Breite der verknüpften Bilddatei verwendet.

Darüber hinaus können für ersetzte Elemente visuelle Formatierungsanforderungen gelten, die vom Element selbst auferlegt werden, z B. das Erscheinungsbild von Benutzeroberflächensteuerelementen für Formularelemente, die außerhalb der Kontrolle von CSS liegen.

Wie sich dies auf Schaltflächen auswirkt

Obwohl Schaltflächen nicht als reine ersetzte Elemente betrachtet werden Wie vom W3C definiert, verhalten sie sich in diesem Zusammenhang ähnlich. Standardmäßig verfügen sie über intrinsische Abmessungen, die auf ihrem Inhalt basieren, und „display: block“ überschreibt dieses Verhalten nicht.

Lösung zum Dehnen von Schaltflächen

Wenn Sie möchten Wenn Sie die Schaltflächen „Strecken“ verwenden, um den Container zu füllen, können Sie einen alternativen Ansatz verwenden:

<code class="css">button {
  display: flex;
  width: 100%;
}</code>

Flexbox bietet mehr Kontrolle über die Elementgröße und ermöglicht das Strecken von Elementen, um den verfügbaren Platz auszufüllen.

Das obige ist der detaillierte Inhalt vonWarum werden die Schaltflächen „display: block' und „width: auto' nicht gestreckt, um den Container in Chrome zu füllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!