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

Question

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

Demandé el 11 de Février, 2013: Quand la question a-t-elle été
593737 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je dois dessiner une ligne horizontale après un bloc, et j'ai trois façons de le faire :

1) Définir une classe h_line et y ajouter 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 hr étiquette

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

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

3) l'utiliser comme un after pseudo-classe

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

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

Quel est le moyen le plus pratique ?

Demandé el 11 de Février, 2013 par Павел Тявин

Answer 1

5 Réponses

Answer 2

164voto

moettinger Points 1060

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

Voici comment html5boilerplate le fait :

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

Répondu el 11 de Février, 2013 par moettinger (1060 Points )

Answer 3

67voto

Nico Points 13021

J'opterais pour un balisage sémantique, j'utiliserais une <hr/> .

À moins que vous ne souhaitiez simplement une bordure, vous pouvez alors utiliser une combinaison de padding, de border et de margin, pour obtenir le périmètre souhaité.

Répondu el 11 de Février, 2013 par Nico (13021 Points )

Answer 4

13voto

Nadeem Qasmi Points 123

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

Répondu el 20 de Janvier, 2019 par Nadeem Qasmi (123 Points )

Answer 5

11voto

Bernhard Poiss Points 2544

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

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

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

Répondu el 11 de Février, 2013 par Bernhard Poiss (2544 Points )

Answer 6

11voto

user1587329 Points 91

Si vous voulez vraiment un pause thématique vous pouvez utiliser le <hr> étiquette.

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 l'utiliser comme

<div class="block_1 hline-bottom">Cheese</div>

Répondu el 24 de Avril, 2017 par user1587329 (91 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: