linea orizzontale e modo corretto di codificarlo in html, css

122

Devo disegnare una linea orizzontale dopo un blocco e ho tre modi per farlo:

1) Definisci una classe h_linee aggiungi funzionalità CSS, come

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

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

2) Usa hrtag

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

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

3) afterusalo come una pseudoclasse

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

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

Qual è il modo più pratico?

html css

— Павел Тявин
fonte

2

Penso che <hr>sia il più semantico. Voglio dire, non è per questo che è destinato?

— j08691

3

perché non usare border-bottom?

— jsweazy

3

In HTML5 l'elemento HTML <hr> rappresenta un'interruzione tematica tra gli elementi a livello di paragrafo (ad esempio, un cambio di scena in una storia o uno spostamento di argomento con una sezione).

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

Espandi lo snippet

Ecco come lo fa html5boilerplate :

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

— moettinger
fonte

3

Nota: utilizzare margin: 1em autose si desidera che sia sempre al centro della pagina.

— Jacques Marais

1

@JacquesMarais, non sono sicuro che sia necessario in quanto è un elemento blocco senza larghezza definita, quindi si estenderebbe comunque sulla larghezza dell'intero contenitore.

— Moettinger

65

Preferisco il markup semantico, uso un file <hr/>.

A meno che non sia solo un bordo quello che vuoi, puoi usare una combinazione di imbottitura, bordo e margine per ottenere il limite desiderato.

— Bevacqua
fonte

8

<hr>è HTML5 valido. Rappresentava una regola orizzontale, ma ora è definita in termini semantici come una rottura tematica tra i contenuti. La maggior parte dei browser lo visualizzerà comunque come una linea orizzontale se non diversamente specificato. Fonte: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

— AJMaxwell,

Il titolo dice una linea orizzontale e <hr /> è così, quindi ho deciso. Il titolo forse avrebbe dovuto leggere la linea orizzontale in stile.

— Ryan Bayne

11

In HTML5, il <hr>tag definisce un'interruzione tematica. In HTML 4.01, il <hr>tag rappresenta una regola orizzontale.

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

Quindi, dopo la definizione, preferirei <hr>

— bpoiss
fonte

10

Se vuoi davvero una pausa tematica , usa <hr>assolutamente il tag.

Se vuoi solo una linea di design, potresti usare qualcosa come la classe css

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

e usalo come

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

— Serv-inc
fonte

5

Volevo una linea lunga come un trattino, quindi l'ho usata.

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

}

<div class="dash"></div>

Espandi lo snippet

— Alia
fonte

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>

Espandi lo snippet

— Nadeem Qasmi
fonte

Non hai risposto alla domanda "Qual è il più pratico?"

— Brian Tompsett - 汤莱恩

1

La mia semplice soluzione è di modellare hr con css per avere zero margini superiore e inferiore, zero bordi, 1 pixel di altezza e un colore di sfondo contrastante. Questo può essere fatto impostando lo stile direttamente o definendo una classe, ad esempio, come:

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

— FredG
fonte

1

dipende dai requisiti, ma molti suggerimenti degli sviluppatori sono di rendere il codice il più semplice possibile . quindi, vai con un semplice tag "hr" e codice CSS per questo.

— Ram Prasad
fonte

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>

Espandi lo snippet

testo enfatizzato

— bruh
fonte

Aggiungi un commento che spieghi la tua risposta.

— Barthy

0

Questo è un esempio relativamente semplice e ha funzionato per me.

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

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