Frage Border-Top hinter <legend>

[DerNeuling21]

Hallo zusammen,

ich baue gerade etwas an meiner Webseite nach und möchte gerne einen kleinen Teil von einer anderen Webseite übernehmen.



es geht um die Linie rechts neben Adressen. Ich habe im Code der Seite nachgeschaut wie das gemacht wurde und gesehen, das eine Border verwendet wurde. Habe das dann bei mir auch versucht, bin aber leider zu keinem Ergebnis bekommen. So sieht es aus wenn man die Komplette Border anzeigen lässt:



Wenn ich das bei mir versuche, dann sieht das so aus:



Wie bekomme ich die Linie hinter dem legend hin ?

Danke für eure Hilfe

 

[Aaron3219]

Das Problem ist, dass der Container von h3 über die komplette Breite geht.
Dies lässt sich beheben, wenn du den Container auf die Breite des Textes setzt.
Damit es mit jeder Textlänge funktioniert, wäre width: fit-content eine Idee.

Dies ist allerdings in einigen Browsern nicht unterstützt (siehe caniuse.com).
Stattdessen würde ich also zu:

float: left;
clear: left;

tendieren (auch wenn ich float nur sehr ungern einsetze), da es in dem Falle wahrscheinlich die beste Lösung ist.
http://jsfiddle.net/zsn0axo5/8/

Wenn du auf float und clear verzichten willst, könntest du auch spans oder a-Tags benutzen, da diese von sich aus nur die Breite ihres Inhalts annehmen.
Aber da h-Tags eh für Überschriften gedacht sind, nimm doch einfach die erste Lösung ;).

 

[scbawik]

Das Problem ist, dass der Container von h3 über die komplette Breite geht.
Dies lässt sich beheben, wenn du den Container auf die Breite des Textes setzt.
Damit es mit jeder Textlänge funktioniert, wäre width: fit-content eine Idee.

Dies ist allerdings in einigen Browsern nicht unterstützt (siehe caniuse.com).
Stattdessen würde ich also zu:

float: left;
clear: left;

tendieren (auch wenn ich float nur sehr ungern einsetze), da es in dem Falle wahrscheinlich die beste Lösung ist.
http://jsfiddle.net/zsn0axo5/8/

Wenn du auf float und clear verzichten willst, könntest du auch spans oder a-Tags benutzen, da diese von sich aus nur die Breite ihres Inhalts annehmen.
Aber da h-Tags eh für Überschriften gedacht sind, nimm doch einfach die erste Lösung ;).

Ich denke Flexbox wäre hier auch gut geeignet.
Wenn es der Hintergrund zulässt, kann man es auch so lösen:
https://jsfiddle.net/6L2fhjq4/6/

Edit: Ok, deine Lösung setzt auch einen einfachen Hintergrund voraus.

 

[DerNeuling21]

Für alle die das nachfolgend lesen:

es funktioniert mit

    width: auto;
    padding-right: 8px;

 

[Aaron3219]

Dann hast du aber nicht mit h-Tags gearbeitet oder?
width: auto sollte nämlich nicht funktionieren.

Welche Tags hast du denn benutzt?

 

[scbawik]

Welche Tags hast du denn benutzt?

Steht im Titel ;)

 

[Aaron3219]

Das ist richtig, aber es funktioniert bei mir trotzdem nicht .