pozioma linia i właściwy sposób zakodowania w html, css

122

Muszę narysować poziomą linię po jakimś bloku i mam na to trzy sposoby:

1) Zdefiniuj klasę h_linei dodaj do niej funkcje CSS, takie jak

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

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

2) Użyj hrtagu

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

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

3) używaj go jak afterpseudoklasy

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

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

Który sposób jest najbardziej praktyczny?

html css Павел Тявин
źródło
2
Myślę, że <hr>jest najbardziej semantyczny. To znaczy, czy to nie jest to, do czego jest przeznaczone?
j08691
3
dlaczego nie używać border-bottom?
jsweazy
3
W HTML5 element HTML <hr> reprezentuje tematyczną przerwę między elementami na poziomie akapitu (na przykład zmiana sceny w opowieści lub przesunięcie tematu z sekcją).
Scott Simpson,

Odpowiedzi:

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>
Rozwiń fragment

Oto, jak robi to html5boilerplate :

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
moettinger
źródło
3
Uwaga: użyj, margin: 1em autojeśli chcesz, aby zawsze znajdował się na środku strony.
Jacques Marais
1
@JacquesMarais, nie jestem pewien, czy jest to konieczne, ponieważ jest to element blokowy bez zdefiniowanej szerokości, więc i tak obejmowałby szerokość całego kontenera.
moettinger
65

Wybrałbym znaczniki semantyczne, użyłbym pliku <hr/>.

O ile nie jest to tylko obramowanie, co chcesz, możesz użyć kombinacji dopełnienia, obramowania i marginesu, aby uzyskać pożądane obramowanie.

bevacqua
źródło
8
<hr>jest prawidłowym HTML5. Stosowany jest regułą horyzontalną, ale obecnie jest definiowany w kategoriach semantycznych jako tematyczna przerwa między treściami. Większość przeglądarek nadal będzie wyświetlać go jako poziomą linię, chyba że powiedziano inaczej. Źródło: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
AJMaxwell
Tytuł mówi, że linia pozioma i <hr /> to to, więc zwiększam to. Być może tytuł powinien brzmieć stylizowana linia pozioma.
Ryan Bayne
10

Jeśli naprawdę chcesz przerwy tematycznej, zdecydowanie użyj <hr>tagu.

Jeśli potrzebujesz tylko linii projektowej, możesz użyć czegoś takiego jak klasa css

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

i używaj go jak

<div class="block_1 hline-bottom">Cheese</div>
serv-inc
źródło
6

Chciałem długiej kreski, więc użyłem tego.

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

}
<div class="dash"></div>
Rozwiń fragment

Alia
źródło
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>
Rozwiń fragment

Nadeem Qasmi
źródło
Nie odpowiedziałeś na pytanie „Który z nich jest najbardziej praktyczny?”
Brian Tompsett - 汤 莱恩
1

Moim prostym rozwiązaniem jest stylizacja hr z css tak, aby miała zerowe górne i dolne marginesy, zerowe obramowanie, wysokość 1 piksela i kontrastowy kolor tła. Można to zrobić, ustawiając styl bezpośrednio lub definiując klasę, na przykład:

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
FredG
źródło
1

zależy to od wymagań, ale wielu programistów sugeruje, aby kod był tak prosty, jak to tylko możliwe . więc użyj do tego prostego znacznika „hr” i kodu CSS.

Ram Prasad
źródło
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>
Rozwiń fragment
wyróżniony tekst

bruh
źródło
Dodaj komentarz wyjaśniający Twoją odpowiedź.
Barthy