garis horizontal dan cara yang benar untuk mengkodekannya di html, css

122

Saya perlu menggambar garis horizontal setelah beberapa blok, dan saya memiliki tiga cara untuk melakukannya:

1) Tentukan kelas h_linedan tambahkan fitur css ke dalamnya, seperti

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

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

2) Gunakan hrtag

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

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

3) gunakan seperti afterpseudoclass

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

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

Cara manakah yang paling praktis?

html css Павел Тявин
sumber
2
Menurut saya <hr>yang paling semantik. Maksudku, bukankah itu dimaksudkan untuk itu?
j08691
3
kenapa tidak digunakan border-bottom?
jsweazy
3
Dalam HTML5, elemen <hr> HTML mewakili jeda tematik antara elemen tingkat paragraf (misalnya, perubahan adegan dalam cerita, atau pergeseran topik dengan bagian).
Scott Simpson

Jawaban:

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>
Luaskan cuplikan

Berikut adalah cara html5boilerplate melakukannya:

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
moettinger
sumber
3
Catatan: Gunakan margin: 1em autojika Anda ingin selalu berada di tengah halaman.
Jacques Marais
1
@JacquesMarais, tidak yakin itu perlu karena ini adalah elemen blok tanpa lebar yang ditentukan sehingga akan menjangkau lebar seluruh penampung.
moettinger
65

Saya akan menggunakan markup semantik, menggunakan <hr/>.

Kecuali jika hanya border yang Anda inginkan, maka Anda bisa menggunakan kombinasi padding, border dan margin, untuk mendapatkan batasan yang diinginkan.

bevacqua.dll
sumber
8
<hr>adalah HTML5 yang valid. Ini digunakan mewakili aturan horizontal, tetapi sekarang didefinisikan dalam istilah semantik sebagai jeda tematik antara konten. Sebagian besar browser masih akan menampilkannya sebagai garis horizontal kecuali diberitahu sebaliknya. Sumber: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
AJMaxwell
Judul mengatakan garis horizontal dan <hr /> adalah jadi saya naik ini. Judul mungkin harus membaca garis horizontal bergaya.
Ryan Bayne
10

Jika Anda benar-benar ingin jeda tematik , gunakan <hr>tag.

Jika Anda hanya menginginkan garis desain, Anda dapat menggunakan sesuatu seperti kelas css

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

dan menggunakannya seperti

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

Saya ingin garis panjang seperti garis, jadi saya menggunakan ini.

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

}
<div class="dash"></div>
Luaskan cuplikan

Alia
sumber
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>
Luaskan cuplikan

Nadeem Qasmi
sumber
Anda belum menjawab pertanyaan "Mana yang paling praktis?"
Brian Tompsett - 汤 莱恩
1

Solusi sederhana saya adalah memberi gaya hr dengan css agar memiliki margin atas & bawah nol, batas nol, tinggi 1 piksel, dan warna latar belakang yang kontras. Ini dapat dilakukan dengan menyetel gaya secara langsung atau dengan menentukan kelas, misalnya, seperti:

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

itu tergantung pada kebutuhan, tetapi banyak saran pengembang adalah membuat kode Anda sesederhana mungkin . Jadi, gunakan tag "hr" dan kode CSS sederhana untuk itu.

Ram Prasad
sumber
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>
Luaskan cuplikan
teks yang ditekankan

bruh
sumber
Silakan tambahkan komentar yang menjelaskan jawaban Anda.
Barthy