web-dev-qa-db-fra.com

Comment décorer une balise <hr />

Je veux avoir une règle horizontale avec les caractéristiques suivantes:

align:left
noshade
size:2
width:50%
color:#000000

Si les attributs ci-dessus n'étaient pas obsolètes, j'utiliserais:

<hr size="2" width="50%" noshade style="color:#000000" align="left" />

Je pense maintenant à utiliser l'attribut style uniquement. Existe-t-il des astuces pour rendre le rendu HR identique dans plusieurs navigateurs?

MODIFIER:

À partir des réponses, j'ai refait mon tag <hr /> en:

<hr style='background-color:#000000;border-width:0;color:#000000;height:2px;line-height:0;text-align:left;width:50%;'/>

Cependant, dans Firefox, la propriété text-align: left semble n'avoir aucun effet, car la règle horizontale apparaît centrée. Cela fonctionne bien dans Opera et IE, cependant. J'ai expérimenté mon code ici:

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test

Une astuce pour le rendre aligné à gauche?

htmlcssxhtml
10
John Assymptoth

En 2015, la plupart des navigateurs semblent rendre HR sous forme d'élément de bloc avec une hauteur nulle et une bordure incrustée de 1px. Vous pouvez changer les propriétés comme ceci:

p { font: italic large serif; text-align: center; }
<p>hr size="2" color="palevioletred" width="50%" align="left"</p>
<hr style="border: 1px solid palevioletred; 
           margin-right: 50%;           ">

<p>hr size="2" color="palevioletred" width="50%" align="right"</p>
<hr style="border: 1px solid palevioletred; 
           margin-left: 50%;">

<p>hr size="1" color="palevioletred" width="50%" align="center"</p>
<hr style="border-width: 1px 1px 0;
           border-style: solid;
           border-color: palevioletred; 
           width: 50%;
           margin-left: auto;
           margin-right: auto;">

7
Salman A

Pour répondre à ta question:

"Un truc pour le rendre aligné à gauche?"

Je voudrais juste ajouter 'display: inline-block;' à l'attribut style de votre code précédent . Votre code complété ressemblerait à ceci:

<hr style = 'background-color:#000000; border-width:0; color:#000000; height:2px; lineheight:0; display: inline-block; text-align: left; width:50%;' />

J'ai testé cela dans Chrome, IE et Firefox, et cela a fonctionné dans chacun. Une documentation complémentaire et la compatibilité du navigateur sont disponibles à l’adresse suivante: CSS2 - La déclaration d’affichage

Sur une note de côté, il serait préférable d'ajouter ce style à une feuille de style externe ou interne au lieu de l'ajouter en ligne. De cette façon, vous pouvez avoir un élément hr normalisé pour l'ensemble de votre site Web, et vos déclarations de style sont séparées de la présentation de votre document.

4
BMFredrick

Pourquoi ne pas faire une image, puis tapez ce code en CSS ???

            hr {
        height:43px; /*(image height)*/
        width:50%;
    background-image:url("hr-tag-image.png"); /*Your image file*/
/*Demo: https://heckles.typrograms.com */
}
0
user4616966