Das Problem
In einigen Browsern <button>akzeptiert das Element keine Änderungen an seinem displayWert, außer zwischen blockund zu wechseln inline-block. Dies bedeutet, dass ein <button>Element kein Flex- oder Gittercontainer oder auch kein sein kann <table>.
Zusätzlich zu <button>Elementen gilt diese Einschränkung möglicherweise auch für <fieldset>und <legend>Elemente.
Weitere Informationen finden Sie in den Fehlerberichten unten.
Hinweis: Obwohl es sich nicht um Flex-Container handeln kann, können <button>Elemente Flex-Elemente sein.
Die Lösung
Es gibt eine einfache und browserübergreifende Problemumgehung für dieses Problem:
Wickeln Sie den Inhalt des buttonin ein spanund machen Sie spanden Flex-Container.
Angepasster HTML-Code (umschlossener buttonInhalt in a span)
<div>
<button>
<span><!-- using a div also works but is not valid HTML -->
<span>Test</span>
<span>Test</span>
</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>
Angepasstes CSS (gezielt span)
button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}
Überarbeitete Demo
Referenzen / Fehlerberichte
Flexbox auf einem <button>blockiert den Inhalt, erstellt jedoch keinen Flex-Formatierungskontext
Benutzer (Oriol Brufau): Die Kinder von <button>sind blockiert, wie es die Flexbox-Spezifikation vorschreibt. Es <button>scheint jedoch einen Blockformatierungskontext anstelle eines flexiblen zu erstellen.
Benutzer (Daniel Holbert): Genau das erfordert die HTML-Spezifikation. Einige HTML-Containerelemente sind "speziell" und ignorieren ihren CSS- displayWert in Gecko effektiv [abgesehen davon, ob es sich um Inline-Ebene oder Block-Ebene handelt]. <button>ist einer davon. <fieldset>& <legend>sind auch.
Unterstützung für die Anzeige hinzufügen: Flex / Grid- und Columnset-Layout innerhalb von <button>Elementen
Benutzer (Daniel Holbert):
<button>ist (von Browsern) nicht in reinem CSS implementierbar, daher sind sie aus Sicht von CSS eine Art Black Box. Dies bedeutet, dass sie nicht unbedingt so reagieren, wie z <div>
. B. a .
Dies ist nicht spezifisch für Flexbox - z. B. rendern wir keine Bildlaufleisten, wenn Sie overflow:scrolleine Schaltfläche anlegen , und wir rendern sie nicht als Tabelle, wenn Sie sie anbringen display:table.
Wenn Sie noch weiter zurücktreten, ist dies nicht spezifisch für <button>. Berücksichtigen Sie <fieldset>und <table>welche auch spezielles Renderverhalten haben.
Und alt-timey HTML - Elemente wie <button>und <table>und <fieldset>einfach keine benutzerdefinierten unterstützen displayWerte, die nicht für die Zwecke der Beantwortung der auf sehr hohem Niveau Frage „ist dieses Element auf Blockebene oder auf Inline-Ebene“, für fließende andere Inhalte rund um das Element .
Siehe auch: