đường ngang và cách thích hợp để viết mã trong html, css

122

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

1) Xác định một lớp h_linevà thêm các tính năng css vào 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 hrthẻ

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

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

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

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

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

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

html css

— Павел Тявин
nguồn

2

Tôi nghĩ rằng đó <hr>là ngữ nghĩa nhất. Ý tôi là, đó không phải là ý nghĩa của nó sao?

— j08691

3

tại sao không sử dụng border-bottom?

— jsweazy

3

Trong HTML5, phần tử HTML <hr> biểu thị sự ngắt quãng theo chủ đề giữa các phần tử cấp đoạn (ví dụ: sự thay đổi cảnh trong một câu chuyện hoặc sự thay đổi chủ đề với một phần).

— 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>

Mở rộng đoạn mã

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

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

— moettinger
nguồn

3

Lưu ý: Sử dụng margin: 1em autonếu bạn muốn nó luôn nằm ở giữa trang.

— Jacques Marais

1

@JacquesMarais, không chắc điều đó là cần thiết vì nó là một phần tử khối không có chiều rộng xác định nên dù sao thì nó cũng sẽ kéo dài chiều rộng của toàn bộ vùng chứa.

— moettinger

65

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, thì bạn có thể sử dụng kết hợp padding, border và margin để có được đường viền mong muốn.

— bevacqua
nguồn

8

<hr>là HTML5 hợp lệ. Nó được sử dụng đại diện cho một quy tắc ngang, nhưng bây giờ được định nghĩa trong thuật ngữ ngữ nghĩa như một khoảng ngắt theo chủ đề giữa nội dung. Hầu hết các trình duyệt sẽ vẫn hiển thị nó dưới dạng một đường ngang trừ khi được chỉ dẫn khác. Nguồn: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

— AJMaxwell vào

Tiêu đề cho biết dòng ngang và <hr /> là vậy nên tôi up cái này. Tiêu đề có lẽ nên đọc theo kiểu hàng ngang.

— Ryan Bayne

11

Trong HTML5, <hr>thẻ xác định ngắt theo chủ đề. Trong HTML 4.01, <hr>thẻ đại diện cho một quy tắc ngang.

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

Vì vậy, sau khi định nghĩa, tôi muốn <hr>

— bpoiss
nguồn

10

Nếu bạn thực sự muốn nghỉ theo chủ đề , hãy sử dụng <hr>thẻ.

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ì đó 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>

— serv-inc
nguồn

5

Tôi muốn có một dấu gạch ngang dài như dòng, vì vậy tôi đã sử dụng cái này.

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

}

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

Mở rộng đoạn mã

— Alia
nguồn

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>

Mở rộng đoạn mã

— Nadeem Qasmi
nguồn

Bạn chưa trả lời được câu hỏi "Cái nào thiết thực nhất?"

— Brian Tompsett - 汤莱恩

1

Giải pháp đơn giản của tôi là tạo kiểu hr với css để không có lề trên và dưới, không viền, 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 cách thiết lập kiểu trực tiếp hoặc bằng cách xác định một lớp, chẳng hạn như:

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

— FredG
nguồn

1

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

— Ram Prasad
nguồn

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>

Mở rộng đoạn mã

Đoạn văn bản được nhấn mạnh

— bầm tím
nguồn

Vui lòng thêm một bình luận giải thích câu trả lời của bạn.

— Barthy

0

Đây là ví dụ tương đối đơn giản và phù hợp với tôi.

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

Tài nguyên: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html