horizontale Linie und richtige Weg, es in html-Code, CSS

Question

Ich brauche eine horizontale Linie nach einiger Block zu ziehen, und ich habe drei Möglichkeiten, es zu tun:

1) Definieren Sie eine Klasse h_line und CSS-Eigenschaften hinzufügen es, wie

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

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

2) verwenden hr tag

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

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

3) verwenden, es wie ein after Pseudo

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

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

Welcher Weg ist am praktischsten?

Answer 1

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

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

Hier bevorzugen, wie html5boilerplate tut es:

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

Answer 2

Ich würde für semantische Markup gehen, verwenden Sie eine <hr/>.

Wenn es sich nicht nur um eine Grenze handelt, können Sie eine Kombination aus Füllung, Rahmen und Rand verwenden, um die gewünschte Grenze zu erhalten.

Answer 3

In HTML5 definiert der Tag <hr> einen thematischen Bruch. In HTML 4.01 stellt das <hr>-Tag eine horizontale Regel dar.

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

So nach Definition, würde ich <hr>

Answer 4

Wenn Sie wirklich eine thematische Pause wollen, verwenden Sie unbedingt die <hr>-Tag.

---

Wenn Sie nur eine Design-Linie möchten, können Sie so etwas wie die CSS-Klasse

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

und verwenden Sie es wie

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

Answer 5

Meine einfache Lösung ist es, Stil hr mit CSS verwenden könnte null & unteren Ränder, Null Grenze, 1 Pixel Höhe und kontrastierende Hintergrundfarbe zu haben. Diese kann durch Einstellung der Stil direkt oder durch die Definition einer Klasse durchgeführt werden, zum Beispiel wie:

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

Answer 6

es ist, hängt von Anforderung, aber viele Entwickler Vorschläge ist der Code als einfach wie möglich zu machen. also, gehen Sie mit einfachen "hr" Tag und CSS-Code dafür.

Answer 7

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

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

betonte Text