Alternative à la balise de règle horizontale `<hr>` fonctionnant en html5

Question

Je travaille actuellement sur un calendrier en html (en html5), et j'essaie d'ajouter une ligne horizontale colorée. J'ai utilisé la balise de règle horizontale <hr> mais j'ai du mal à faire fonctionner la plupart des attributs.

C'est ce que je veux :

<hr color="purple" align="left" width="120%" size="6">

J'ai lu que certains attributs ne fonctionnent pas en html5... et le seul qui fonctionne est la balise width. Aucun des autres ne fait rien !

Comment faire pour que ça marche ? Y a-t-il une meilleure façon d'aborder la question ?

Answer 1

Utilisez les règles CSS

hr.someClass {
  background-color: purple;
  width: 120%;
  height: 12px;
  border-top: 1px solid black
}

<hr class="someClass">

Answer 2

Vous pourriez ajouter un div avec un border-top comme ci-dessous :

<div style="border-top: 6px solid purple"></div>

Avec des styles externes (ce qui est toujours mieux) :

.horizontal-rule {
  border-top: 6px solid purple;
}

<div class="horizontal-rule"></div>

Answer 3

Dans la version HTML 4.01, l'élément <hr> représente une règle horizontale. En HTML5, la balise <hr> définit une rupture thématique. De même, des attributs comme align , size y width ne sont pas prises en charge par HTML5.

La bonne alternative à cela est de définir un div comme :

HTML

<div class="hr"></div>

CSS

.hr {
    border-top: 6px solid purple;
    width: 120%;
}

Answer 4

Vous pouvez utiliser

<div style="background-color: purple; text-align: left; width: 120%; height: 6px;"></div>

ici vous pouvez donner la "background-color" pour la ligne "hr" et height comme hauteur de la bordure. J'espère que cela fonctionnera :)