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?


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>

Berikut adalah cara html5boilerplate melakukannya:

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

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.


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>

5

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

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

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


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>


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;
}

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.


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>
teks yang ditekankan


Silakan tambahkan komentar yang menjelaskan jawaban Anda.
Barthy

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.