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

— Павел Тявин
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

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
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
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

11

En HTML5, la <hr>balise définit une pause thématique. En HTML 4.01, la <hr>balise représente une règle horizontale.

http://www.w3schools.com/tags/tag_hr.asp

Donc après définition, je préférerais <hr>

— bpoiss
source

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
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
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
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
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
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
source

Veuillez ajouter un commentaire expliquant votre réponse.

— Barthy

0

Ceci est un exemple relativement simple et a fonctionné pour moi.

hr {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

Ressource: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html