web-dev-qa-db-fra.com

Alignez <hr> vers la gauche d'une manière compatible HTML5

Actuellement, j'utilise

<hr align="left" />

sur ma page HTML5, mais j'ai lu que la propriété align était obsolète dans XHTML 4.01 et supposément supprimée de HTML5. J'aimerais utiliser CSS plutôt qu'un attribut en ligne comme celui-ci, mais quand j'ai essayé

hr{align: left; max-width: 800px;}

ou hr{text-align: left;} ou hr{left: 0;} ou hr{float: left;}, il est juste apparu au centre.

Alors, que dois-je utiliser à la place de l'attribut inline ci-dessus?

htmlcsshtml5standards
29
Chris Middleton

Vous essayez d'utiliser quelque chose d'une manière qui (comme Eliezer Bernart le mentionne .. et apparemment ce commentaire avec le lien vers le document MDN a disparu) ne "fonctionne plus de cette façon". Vous pouvez, tant que cela ne vous dérange pas que ce soit visqueux dans IE, définir simplement la marge à zéro - http://jsfiddle.net/s52wb/

hr {
    max-width: 100px;
    margin: 0px;
}

Une meilleure idée serait cependant d'imiter l'ancienne façon de faire des choses des RH par le biais de CSS sans utiliser les RH. Découvrez http://jsfiddle.net/p5ax9/1/ pour une démo:

p:first-child:before {
    display: none;
}
p:before {
    content: " ";
    border: 1px solid black;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
    max-width: 100px;
}
20
Stephen

Une option serait de mettre la marge gauche à zéro:

hr{max-width: 800px; margin-left:0;}
33
matt

Je ne sais pas quels navigateurs ont été utilisés pour certaines réponses ci-dessus, mais je n'ai trouvé ni text-align:left ni margin-left:0 fonctionnait dans les deux IE (11, mode Standards, HTML5) et Firefox (29).

  • IE11: text-align:left travaux, margin-left:0 laisse la règle centrée.

  • FF: margin-left:0 travaux, text-align:left laisse la règle centrée.

  • Donc, soit utilisez les deux, o J'ai trouvé que margin-right:100% fonctionne pour les deux!

13
JonBrave

Vous pouvez utiliser la balise div à la place.

<div style="border: thin solid lightgray; width: 100px;"></div>
1
Art

fais ça

hr {
   display: inline;  //or inline-block
   text-align: left;
}
0
CRABOLO