horizontale Linie und richtige Art, es in HTML, CSS zu codieren

122

Ich muss nach einem Block eine horizontale Linie zeichnen, und ich habe drei Möglichkeiten, dies zu tun:

1) Definieren Sie eine Klasse h_lineund fügen Sie CSS-Funktionen hinzu, wie z

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

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

2) Verwenden Sie das hrTag

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

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

3) Verwenden Sie es wie eine afterPseudoklasse

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

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

Welcher Weg ist der praktischste?

html css Павел Тявин
quelle
2
Ich würde denken, das <hr>ist die semantischste. Ich meine, ist das nicht das, wofür es gedacht ist?
j08691
3
warum nicht verwenden border-bottom?
jsweazy
3
In HTML5 stellt das HTML-Element <hr> eine thematische Unterbrechung zwischen Elementen auf Absatzebene dar (z. B. einen Szenenwechsel in einer Story oder einen Themenwechsel mit einem Abschnitt).
Scott Simpson

Antworten:

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>
Erweitern Sie das Snippet

So macht es html5boilerplate :

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
Moettinger
quelle
3
Hinweis: Verwenden margin: 1em autoSie diese Option, wenn Sie möchten, dass sie sich immer in der Mitte der Seite befindet.
Jacques Marais
1
@JacquesMarais, nicht sicher, ob dies notwendig ist, da es sich um ein Blockelement ohne definierte Breite handelt, sodass es ohnehin die Breite des gesamten Containers überspannen würde.
Moettinger
65

Ich würde mich für semantisches Markup entscheiden und ein <hr/>.

Wenn es nicht nur ein Rand ist, den Sie möchten, können Sie eine Kombination aus Polsterung, Rand und Rand verwenden, um die gewünschte Grenze zu erhalten.

bevacqua
quelle
8
<hr>ist gültiges HTML5. Es stellt eine horizontale Regel dar, wird aber jetzt semantisch als thematische Unterbrechung zwischen Inhalten definiert. Die meisten Browser zeigen es weiterhin als horizontale Linie an, sofern nicht anders angegeben. Quelle: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
AJMaxwell
Der Titel sagt horizontale Linie und <hr /> ist das, also mache ich das. Titel sollte vielleicht gestylte horizontale Linie gelesen haben.
Ryan Bayne
11

In HTML5 <hr>definiert das Tag eine thematische Unterbrechung. In HTML 4.01 <hr>repräsentiert das Tag eine horizontale Regel.

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

Nach der Definition würde ich es vorziehen <hr>

bpoiss
quelle
10

Wenn Sie wirklich eine thematische Pause wünschen , verwenden Sie auf jeden Fall das <hr>Tag.

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

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

und benutze es gerne

<div class="block_1 hline-bottom">Cheese</div>
serv-inc
quelle
5

Ich wollte eine lange Strichlinie, also habe ich diese benutzt.

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

}
<div class="dash"></div>
Erweitern Sie das Snippet

Alia
quelle
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>
Erweitern Sie das Snippet

Nadeem Qasmi
quelle
Sie haben die Frage "Welches ist das praktischste?" Nicht beantwortet.
Brian Tompsett - 莱恩 莱恩
1

Meine einfache Lösung besteht darin, hr mit CSS so zu gestalten, dass keine oberen und unteren Ränder, kein Rand, keine Pixelhöhe und keine kontrastierende Hintergrundfarbe vorhanden sind. Dies kann durch direktes Festlegen des Stils oder durch Definieren einer Klasse erfolgen, z. B.:

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

Es hängt von den Anforderungen ab, aber viele Entwickler schlagen vor, Ihren Code so einfach wie möglich zu gestalten . Verwenden Sie dazu einfach das "hr" -Tag und den CSS-Code.

Ram Prasad
quelle
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>
Erweitern Sie das Snippet
hervorgehobener Text

bruh
quelle
Bitte fügen Sie einen Kommentar hinzu, der Ihre Antwort erklärt.
Barthy