đường ngang và đúng cách để mã hóa nó trong html, css

Question

tôi cần phải vẽ một đường ngang sau khi một số khối, và tôi có ba cách để làm điều đó:

1) Định nghĩa một lớp h_line và thêm các tính năng css để nó, như

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

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

2) sử dụng hr thẻ

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

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

3) sử dụng nó như một pseudoclass after

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

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

Cách nào là thực tế nhất?

Answer 1

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

<div>Hello</div> 
 
<hr/> 
 
<div>World</div>

Sau đây là cách thực hiện html5boilerplate nó:

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

Answer 2

Tôi muốn đánh dấu ngữ nghĩa, sử dụng <hr/>.

Trừ khi nó chỉ là một đường viền những gì bạn muốn, sau đó bạn có thể sử dụng một sự kết hợp của đệm, biên giới và lề, để có được giới hạn mong muốn.

Answer 3

Trong HTML5, thẻ <hr> xác định ngắt chuyên đề. Trong HTML 4.01, thẻ <hr> thể hiện quy tắc ngang.

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

Vì vậy, sau khi định nghĩa, tôi sẽ thích <hr>

Answer 4

Nếu bạn thực sự muốn ngắt theo chủ đề, bằng mọi cách, hãy sử dụng thẻ <hr>.

---

Nếu bạn chỉ muốn một dòng thiết kế, bạn có thể sử dụng một cái gì đó giống như lớp css

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

và sử dụng nó như

<div class="block_1 hline-bottom">Cheese</div> 

Answer 5

giải pháp đơn giản của tôi là phong cách hr với css có không có đường viền dưới cùng là & lề dưới, đường viền bằng 0, chiều cao 1 pixel và màu nền tương phản. Điều này có thể được thực hiện bằng thiết lập các phong cách trực tiếp hoặc bằng cách định nghĩa một lớp, ví dụ, như:

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

Answer 6

nó là phụ thuộc vào yêu cầu, nhưng nhiều nhà phát triển đề nghị là làm cho mã của bạn như đơn giản càng tốt. vì vậy, hãy đi với thẻ "hr" đơn giản và mã CSS cho điều đó.

Answer 7

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

<div>Hello</div> 
 
<hr/> 
 
<div>World</div>

nhấn mạnh văn bản