Có nhiều cách để vẽ đường phân cách ngang trong HTML và CSS. Cách đúng sẽ phụ thuộc vào từng trường hợp. Trong bài viết này, tôi sẽ chỉ cho bạn những cách chính để làm điều đó
Generally, the HTML tag [horizontal rule] is a semantic tag that's used to draw a horizontal line, separating elements horizontally. But the tag is not ideal for separating elements in lists
Keep reading to understand how to stylize the tag with CSS or draw separators with CSS only:
Horizontal line with
Thẻ
hr {
border: 0;
border-top: 1px solid #094CFA;
}
hr {
border: 0;
border-top: 1px solid #094CFA;
}
Trong HTML5, thẻ không chỉ là một dòng trực quan mà là một thẻ ngữ nghĩa, nghĩa là các công cụ tìm kiếm cũng xem xét nó khi thẻ xuất hiện, nó biểu thị sự phân tách nội dung, vì vậy điều quan trọng là sử dụng nó đúng chỗ. Xem ví dụ bên dưới
HTML
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
Trước đây, bạn cũng có thể thêm các thuộc tính để tạo kiểu cho thẻ, nhưng các thuộc tính này không còn xuất hiện trong HTML5, chỉ còn CSS để tạo kiểu cho thẻ
Lưu ý rằng chúng ta cũng không cần thực hiện
hr {
border: 0;
border-top: 1px solid #094CFA;
}
See an example below of how to style the color of the using CSS:
hr {
border: 0;
border-top: 1px solid #094CFA;
}
Each browser has a default CSS for the
hr {
border: 0;
border-top: 1px solid #094CFA;
}
hr {
border: 0;
border-top: 1px solid #094CFA;
}
Nếu bạn cần, tôi để đây vài ví dụ về CSS áp dụng cho đường kẻ ngang
See the Pen CSS Examples by Ricardo Metring [@metring] on CodePen.
Tiếp tục đọc để tìm hiểu cách áp dụng đường ngang để phân chia trực quan trong các mục, phần của danh sách, v.v.
Horizontal line in
Theo nguyên tắc thông thường, thẻ
hr {
border: 0;
border-top: 1px solid #094CFA;
}
Vì vậy, không nên thêm
hr {
border: 0;
border-top: 1px solid #094CFA;
}
hr {
border: 0;
border-top: 1px solid #094CFA;
}
hr {
border: 0;
border-top: 1px solid #094CFA;
}
Trong trường hợp danh sách, phân chia menu hoặc bất kỳ loại phân chia nào khác mà bạn chỉ muốn nhận kết quả trực quan, bạn nên sử dụng CSS
Có hai cách phổ biến để phân tách một cái gì đó trực quan. Sử dụng các phần tử giả
hr {
border: 0;
border-top: 1px solid #094CFA;
}
hr {
border: 0;
border-top: 1px solid #094CFA;
}
hr {
border: 0;
border-top: 1px solid #094CFA;
}
hr {
border: 0;
border-top: 1px solid #094CFA;
}
Tách bằng đường viền CSS
Ví dụ bên dưới phù hợp với các menu được làm bằng
hr {
border: 0;
border-top: 1px solid #094CFA;
}
hr {
border: 0;
border-top: 1px solid #094CFA;
}
hr {
border: 0;
border-top: 1px solid #094CFA;
}
HTML
hr {
border: 0;
border-top: 1px solid #094CFA;
}
CSS
hr {
border: 0;
border-top: 1px solid #094CFA;
}
Nếu bạn không muốn hiển thị đường viền trên mục cuối cùng, bạn có thể sử dụng CSS sau
hr {
border: 0;
border-top: 1px solid #094CFA;
}
Xem bên dưới cách tách hoạt động
See the Pen
Tách bằng các phần tử giả
Trong ví dụ bên dưới, chúng tôi sử dụng
hr {
border: 0;
border-top: 1px solid #094CFA;
}
hr {
border: 0;
border-top: 1px solid #094CFA;
}