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,

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

11

W HTML5 <hr>tag określa podział tematyczny. W HTML 4.01 <hr>tag reprezentuje poziomą regułę.

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

Więc po definicji wolałbym <hr>

— bpoiss
źródło

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

0

To jest stosunkowo prosty przykład i zadziałał dla mnie.

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

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