Warum nimmt ein Schaltflächenelement nicht die volle Breite des Containers wie eine Spannweite ein?

Gerade bemerkte dieses Problem jetzt, wenn ich ein span Element habe, kann ich es die volle Breite des übergeordneten Containers machen, wenn ich den Stil display: block anwende, aber ich habe bemerkt, das gleiche passiert nicht, wenn das Element ein button ist. Frage ist, warum? Warum verhält sich ein Button anders (Standard ist ein Block-Element, wenn ich mich richtig erinnere)Warum nimmt ein Schaltflächenelement nicht die volle Breite des Containers wie eine Spannweite ein?

Ich habe es behoben, indem ich width:100% auf den Button angewendet habe, aber nicht wirklich sicher, warum es sich anders verhält.

Fiddle für die Prüfung: https://jsfiddle.net/9k3pjy9e/1/

Quelle

2016-11-29 CanIHazCookieNow

Browser fügen einigen Elementen, einschließlich Schaltflächen, Standardstile hinzu. Sie können sie überschreiben, aber wenn nicht, werden sie so angezeigt, wie der Browser es für richtig hält. Im Fall von Buttons "glauben" die meisten Browser, dass sie eine Breite haben sollten, die auf dem Wert basiert (ziemlich ähnlich zu Inline-Elementen) und auch einige Abstände und Ränder haben. Dies stellt sicher, dass Schaltflächenelemente ohne benutzerdefinierte Stile wie Schaltflächen aussehen. Vergessen Sie nicht, die Antwort zu überprüfen, die in prev erwähnt wurde. Kommentar – mizurnix

Button:. = inline-block „Standardmäßig ist die Größe der Schaltfläche durch seinen Textinhalt (so breit wie sein Inhalt) bestimmt wird, können Sie die Breite Eigenschaft die Breite ändern eines Knopfes. "

More info here

Span: = inline ein Inline-Element in einer neuen Zeile beginnt nicht und nur so viel Breite wie nötig in Anspruch nimmt.

Set es display: block; dann:

Block-Element: Ein Block-Level-Element beginnt immer auf einer neuen Zeile und nimmt zur Verfügung über die gesamte Breite (erstreckt sich nach links und rechts, soweit es möglich).

Während dies mit einem span Element funktioniert, muss für button Element width festgelegt werden.

Quelle

2016-11-29 18:00:19 Syden

Ich vermute, dass jemand Ihre Antwort abgelehnt hat, weil es nicht erklärt hat, warum sich das Element ** button ** anders verhält als das Element ** span **. –

Danke Bill, ehrlich gesagt denke ich, dass es abgelehnt wurde, weil ich das Duplikat nicht eingehalten habe, aber ehrlich gesagt fand ich es zu breit für diesen speziellen Fall. Ich habe versucht, es ein wenig mehr zu polieren, hoffe es hilft zu klären. Grüße. – Syden

Das könnte sehr wohl stimmen. Ich hasse nackte Stimmen. –

Warum nimmt ein Schaltflächenelement nicht die volle Breite des Containers wie eine Spannweite ein?

Antwort

Verwandte Themen