Warum nicht meine Elementanzeige inline?

Lesezeit: 2 Minuten

Benutzer-Avatar
Milder Fuzz

Ich versuche mich zu bewerben display: inline; zum <legend> Element in meinem <fieldset> Element, so dass das Folgende <span> wird in der gleichen Zeile folgen, aber mein CSS hat keine Wirkung.

legend{
    display: inline;
}
span {
    display: inline;
}
<fieldset>
    <legend>Legend</legend>
    <span>Follower</span>
</fieldset>

JSFiddle

BEARBEITEN

Ich habe keine Kontrolle über den HTML-Code; Ich kann nur CSS bearbeiten

  • <legend> Elemente sind “zwielichtig”. Haben Sie darüber nachgedacht, die einfach zu verschieben <span> innerhalb der <legend>?

    – dreißig Punkte

    28. April 2011 um 12:59 Uhr

  • Kannst du nicht 2 Spannen drinnen machen? legend tun, was du willst? <legend><span>Legend</span><span>Follower</span></legend>

    – Bazz

    28. April 2011 um 13:01 Uhr


  • habe die Frage bearbeitet, um das Problem klarer zu machen.

    – Leichter Flaum

    28. April 2011 um 13:13 Uhr

  • Verwandtes Problem in Bugzilla von Firefox bugzilla.mozilla.org/show_bug.cgi?id=653870

    – Mike Gifford

    13. April 2014 um 13:52 Uhr

  • Verwandtes Problem im Bug-Tracker von Chrome: code.google.com/p/chromium/issues/detail?id=481983

    – TylerH

    28. April 2015 um 15:51 Uhr

Legenden sind etwas Besonderes. Insbesondere ihre Standardwiedergabe kann nicht in CSS beschrieben werden, sodass Browser Nicht-CSS-Mittel verwenden, um sie darzustellen. Das bedeutet, dass eine statisch positionierte Legende wie eine Legende behandelt wird und vom eigentlichen Inhalt des Fieldsets getrennt ist.

Das Seltsame endet hier nicht; Wenn Sie die Reihenfolge der Spanne und der Legende umkehren, wird die Legende still werden in den meisten Browsern oben angezeigt (aber anscheinend nicht in Opera).

  • “Standard-Rendering kann nicht in CSS beschrieben werden” Was bedeutet das und warum ist das so? Klingt für mich nach einer schlechten Möglichkeit, HTML-Elemente zu implementieren.

    – TylerH

    28. April 2015 um 15:58 Uhr

  • Es bedeutet, was es sagt: Das traditionelle Fieldset-Rendering kann eigentlich nicht in CSS ausgedrückt werden. Insbesondere die Tatsache, dass die Legende das Fieldset nach Bedarf breiter macht und die Art und Weise, wie die Umrandung des Fieldsets die Legende umgibt.

    – Boris Zbarsky

    28. April 2015 um 20:23 Uhr


Legenden akzeptieren einfach nicht display: inline oder display: inline-blockaber du kannst es geben float: left und es wird ähnlich wie gewünscht angezeigt.

  • Das funktioniert bei mir mit Firefox 51.0.1 und IE 11, aber ist das zuverlässig?

    – R. Schreurs

    6. März 2017 um 12:17 Uhr

  • @R.Schreurs Ich hatte viel Erfolg damit … Ich benutze auch width: fit-content für die Legende, wenn ich IE 11/Edge nicht unterstütze

    – kzh

    7. März 2017 um 14:19 Uhr

1146140cookie-checkWarum nicht meine Elementanzeige inline?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy