ligne horizontale et bonne façon de le coder en html, css

122

J'ai besoin de tracer une ligne horizontale après un bloc, et j'ai trois façons de le faire:

1) Définissez une classe h_lineet ajoutez-y des fonctionnalités css, comme

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2) Utiliser une hrbalise

#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

3) utilisez-le comme une afterpseudo - classe

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

Quelle est la manière la plus pratique?

html css Павел Тявин
la source
2
Je pense que <hr>c'est le plus sémantique. Je veux dire, n'est-ce pas pour ça que ça sert?
j08691
3
pourquoi ne pas l'utiliser border-bottom?
jsweazy
3
En HTML5, l'élément HTML <hr> représente une rupture thématique entre des éléments de niveau paragraphe (par exemple, un changement de scène dans une histoire ou un changement de sujet avec une section).
Scott Simpson

Réponses:

138 

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
Développer l'extrait

Voici comment html5boilerplate le fait:

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
moettinger
la source
3
Remarque: à utiliser margin: 1em autosi vous souhaitez qu'il soit toujours au centre de la page.
Jacques Marais
1
@JacquesMarais, pas sûr que ce soit nécessaire car il s'agit d'un élément de bloc sans largeur définie, donc il couvrirait de toute façon la largeur de tout le conteneur.
moettinger
65

J'irais pour le balisage sémantique, utiliser un <hr/>.

À moins que ce ne soit juste une bordure ce que vous voulez, vous pouvez utiliser une combinaison de remplissage, de bordure et de marge pour obtenir la limite souhaitée.

bevacqua
la source
8
<hr>est du HTML5 valide. Il représentait une règle horizontale, mais est maintenant défini en termes sémantiques comme une rupture thématique entre le contenu. La plupart des navigateurs l'afficheront toujours sous forme de ligne horizontale, sauf indication contraire. Source: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
AJMaxwell
Le titre indique la ligne horizontale et <hr /> est-ce que je monte ceci. Le titre aurait peut-être dû lire une ligne horizontale stylisée.
Ryan Bayne
10

Si vous voulez vraiment une pause thématique , utilisez certainement le <hr>tag.

Si vous voulez juste une ligne de conception, vous pouvez utiliser quelque chose comme la classe css

.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}

et utilisez-le comme

<div class="block_1 hline-bottom">Cheese</div>
serv-inc
la source
6

Je voulais un long tiret comme une ligne, alors je l'ai utilisé.

.dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}
<div class="dash"></div>
Développer l'extrait

Alia
la source
5 

.line {
  width: 53px;
  height: 0;
  border: 1px solid #C4C4C4;
  margin: 3px;
  display:inline-block;
}
<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>
Développer l'extrait

Nadeem Qasmi
la source
Vous n'avez pas répondu à la question "Quelle est la plus pratique?"
Brian Tompsett - 汤 莱恩
1

Ma solution simple est de styliser hr avec css pour avoir zéro marges supérieure et inférieure, zéro bordure, 1 pixel de hauteur et une couleur d'arrière-plan contrastée. Cela peut être fait en définissant le style directement ou en définissant une classe, par exemple, comme:

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
FredG
la source
1

cela dépend des besoins, mais de nombreuses suggestions de développeurs sont de rendre votre code aussi simple que possible . alors, allez avec une simple balise "hr" et du code CSS pour cela.

Ram Prasad
la source
0 

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
Développer l'extrait
texte souligné

bruh
la source
Veuillez ajouter un commentaire expliquant votre réponse.
Barthy