web-dev-qa-db-fra.com

Balise HTML5 pour le saut de ligne horizontal

J'ai déjà trouvé un article sur l'utilisation du <hr> tag pour insérer un saut de ligne, mais lorsque j'ai recherché le tag sur le site Web w3 ( http://www.w3schools.com/tags/tag_hr.asp ), il est indiqué que tous les attributs de le tag n'est pas pris en charge en HTML5. Évidemment, je veux rendre mon site Web compatible HTML5, alors quelle serait la meilleure façon d'insérer une ligne horizontale visible?

Merci

htmlcsshtml5line-breaks
15
Willman

Vous pouvez toujours utiliser <hr> comme une ligne horizontale, et vous devriez probablement le faire. En HTML5, il définit une coupure thématique dans le contenu, sans faire aucune promesse sur la façon dont il est affiché. Les attributs qui ne sont pas pris en charge dans la spécification HTML5 sont tous liés à l'apparence de la balise. L'apparence doit être définie en CSS, pas dans le HTML lui-même.

Utilisez donc le <hr> tag sans attribut, puis stylisez-le en CSS pour qu'il apparaisse comme vous le souhaitez.

27
Thaum Rystra

Utilisez simplement la balise hr dans le fichier HTML et ajoutez le code ci-dessous dans CSS fichier.

    hr {
       display: block;
       position: relative;
       padding: 0;
       margin: 8px auto;
       height: 0;
       width: 100%;
       max-height: 0;
       font-size: 1px;
       line-height: 0;
       clear: both;
       border: none;
       border-top: 1px solid #aaaaaa;
       border-bottom: 1px solid #ffffff;
    }

cela fonctionne parfaitement.

14
shuboy2014

Vous pouvez créer un div qui a les mêmes attributs que le <hr> tag. De cette façon, il est entièrement personnalisable. Voici un exemple de code:

Le HTML:

<h3>This is a header.</h3>
<div class="customHr">.</div>

<p>Here is some sample paragraph text.<br>
This demonstrates what could go below a custom hr.</p>

Le CSS:

.customHr {
    width: 95%
    font-size: 1px;
    color: rgba(0, 0, 0, 0);
    line-height: 1px;

    background-color: grey;
    margin-top: -6px;
    margin-bottom: 10px;
}

Pour voir comment se déroule le projet, voici un JSFiddle pour le code ci-dessus: http://jsfiddle.net/SplashHero/qmccsc06/1/

8
Adam Howard

Au lieu d'utiliser <hr>, vous pouvez l'une des bordures du bloc englobant et l'afficher sous forme de ligne horizontale.

Voici un exemple de code:

Le HTML:

<div class="title_block">
    <h3>This is a header.</h3>
</div>
<p>Here is some sample paragraph text.<br>
This demonstrates that a horizontal line goes between the title and the paragraph.</p>

Le CSS:

.title_block {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
3
James Wu

Je réponds à cette ancienne question juste parce qu'elle apparaît toujours dans les requêtes Google et je pense qu'il manque une réponse optimale: utilisez :: avant ou :: après

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

1
edo