<hr> - Linie lässt sich nicht rechtsbündig ausrichten

niclas333 · 17.02.2022

Hallo,

ich möchte gerne folgende Linie rechtsbündig ausrichten, nur leider bleibt sie immer linksbündig, ganz gleich was ich mache:

<hr style="width:25%;height:3px;border-width:0;background-color:#6197EF" align="right">

Ich habe schon alles mögliche ausprobiert, komme jedoch nicht auf die Lösung. Könntet ihr mir kurz dabei helfen, was ich ändern muss, um die Linie rechtsbündig auszurichten?

Vielen Dank vorab!

Niclas

scatello · 18.02.2022

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linie</title>
    <style>
    hr {
      width:25%;
      height:3px;
      background-color:#6197EF;
      margin-right: 0;
      }
    </style>
  </head>
  <body>
  <p>Ein Text</p>
  <hr>
  <p>Noch ein Text</p>
  </body>
</html>

niclas333 · 18.02.2022

Danke für die schnelle Antwort. Dein Vorschlag erzeugt bei mir in der Wordpress-Seite nur eine ganz normale Linie, also so als ob ich <hr> einfügen würde. Gebe ich es jedoch in einem HTML-Online Editor ein, so funktioniert es. Woran liegt das und wie kann ich das Problem lösen?

Viele Grüße und danke vorab!

scatello · 18.02.2022

niclas333 schrieb:
in der Wordpress-Seite

Toll, warum lieferst du diese Information nicht sofort?

Verpasse in dem Fall dem hr eine CSS-Klasse und trage dann den CSS-Code ins Customer-CSS

niclas333 · 18.02.2022

Habe ich gemacht, nur leider funktioniert es noch nicht.

Dies habe ich in einer HTML Seite eingefügt:


<div id="box2">
<div id="borderright"></div>
</div>

Und dies im CSS Customizer des Themes:


#box2 {

      width:25%;
      height:3px;
      background-color:#6197EF;
      margin-right: 0;
   


}

Die Linie wird korrekt angezeigt aber sie bleibt weiterhin linksbündig.

Sempervivum · 18.02.2022

Versuche, das CSS dem div#borderright zuzuweisen statt #box2:

Code:

#borderright {
    width:25%;
    height:3px;
    background-color:#6197EF;
    margin-right: 0;
}

Sempervivum · 18.02.2022

... soeben getestet und funktioniert nicht. Verwende margin-left: auto; dann funktioniert es bei mir:

Code:

#borderright {
    width:25%;
    height:3px;
    background-color:#6197EF;
    margin-left: auto;
}

niclas333 · 18.02.2022

Hallo,

nun funktionert es auch bei mir. Habe es genauso übernommen. Vielen Dank Euch für die Hilfe!