Hướng dẫn how do i make a horizontal line in html without hr? - Làm cách nào để tạo một dòng ngang trong html mà không cần hr?

Làm thế nào tôi có thể vẽ một đường ngang mỏng mà không cần sử dụng thẻ

---

?

Tôi đã thử điều này:

.horizontal-line{
  border-top: 1px solid #9E9E9E;
  border-bottom: 1px solid #9E9E9E;
}

Mặc dù nó hoạt động, tôi muốn dòng này mỏng hơn. Tôi đã cố gắng giảm 1px xuống 0,5px, nhưng nó không hoạt động.

hỏi ngày 19 tháng 7 năm 2021 lúc 14:34Jul 19, 2021 at 14:34

5

Theo cuộc thảo luận của CSS-Tricks này, bạn có thể đưa ra điều này:

.class-name:after {
    content: " ";
    display: block;
    border-bottom: 0.5px solid #9E9E9E;
}

Đã trả lời ngày 19 tháng 7 năm 2021 lúc 14:38Jul 19, 2021 at 14:38

Dirdirdir

5612 Huy hiệu bạc13 Huy hiệu đồng2 silver badges13 bronze badges

Bạn có thể sử dụng nó nhưng không có nhiều sự khác biệt.

.line {
  display: inline-block;
  width: 100%;
  border-top: 0.2px solid red;
}

hr {
  border-top: 0.2px solid red;
}

  content



  content



  content

Đã trả lời ngày 19 tháng 7 năm 2021 lúc 14:42Jul 19, 2021 at 14:42

Keshav Bajajkeshav BajajKeshav Bajaj

7951 Huy hiệu vàng4 Huy hiệu bạc13 Huy hiệu đồng1 gold badge4 silver badges13 bronze badges

1

Có nhiều cách để làm việc này. Chúng tôi không thể làm cho kích thước của các đường viền dưới 1px trong CSS nên tôi đã thử theo cách này. Hãy thoải mái thay đổi độ mờ.

.horizental-line{
width: 100%;
height: 1px;
background-color: rgb(122, 121, 121);
opacity: 0.5;

}

Đã trả lời ngày 19 tháng 7 năm 2021 lúc 14:44Jul 19, 2021 at 14:44

cbisumcbisumcbisum

Huy hiệu bạc 11611 silver badge10 bronze badges

Ngày 9 tháng 8 năm 2014 lúc 12:14 PM #178409 #178409

Nếu bạn không muốn sử dụng

---

trong đánh dấu của mình vì bất kỳ lý do gì (ví dụ: đó là một ngữ nghĩa của ngữ nghĩa) nhưng bạn vẫn muốn một đường ngang giữa hai yếu tố, thì mánh khóe đơn giản này đạt được kết quả mong muốn:

.class-name:after {
    content: " ";
    display: block;
    border-bottom: 1px solid #rrggbb;
  }

Điều tuyệt vời với điều này là nó có kiểu dáng khối để bạn có thể thêm lề, v.v. nếu bạn không muốn dòng chạy đến rìa của hộp. Nếu bạn sử dụng

.class-name:after {
    content: " ";
    display: block;
    border-bottom: 0.5px solid #9E9E9E;
}

0, bạn sẽ thêm nó vào khối bên dưới mà bạn muốn dòng. Nếu nó có ý nghĩa khi gắn nó vào một cái gì đó trên mà bạn muốn một dòng, hãy thay đổi nó thành

.class-name:after {
    content: " ";
    display: block;
    border-bottom: 0.5px solid #9E9E9E;
}

1 và

.class-name:after {
    content: " ";
    display: block;
    border-bottom: 0.5px solid #9E9E9E;
}

2.

Đơn giản mà hiệu quả. Hy vọng điều này sẽ giúp ai đó.

Ngày 9 tháng 8 năm 2014 lúc 12:27 PM #178410 #178410

.

Trên thực tế, nó rất khó khăn về ngữ nghĩa.entirely semantic…it’s exactly what it says it is..a horizontal rule.

Trong HTML5, TAG xác định một sự phá vỡ theo chủ đề.

Trong HTML 4.01, thẻ đại diện cho một quy tắc ngang.

Tuy nhiên, thẻ vẫn có thể được hiển thị dưới dạng quy tắc ngang trong trình duyệt trực quan, nhưng hiện được định nghĩa theo thuật ngữ ngữ nghĩa, thay vì các thuật ngữ trình bày.

Ngày 9 tháng 8 năm 2014 lúc 12:39 PM #178412 #178412

Đó là lý do tại sao tôi đặt ngữ nghĩa của người Hồi giáo trong các trích dẫn :) Những người khác nhau có những ý tưởng khác nhau về chính xác những gì đó là và isn. Tôi đã không biết về sự thay đổi trong HTML5 mà bạn đã trích dẫn ở trên nhưng tôi cá là hầu hết mọi người sẽ nghĩ

---

như một quy tắc ngang cho mọi thời đại, và điều đó khiến tôi trở thành một thứ phong cách hơn là một thứ ngữ nghĩa, nhưng đó là chỉ mình tôi.

Ngày 9 tháng 8 năm 2014 lúc 12:55 tối #178415 #178415

Tương tự, nếu bạn muốn một đường ngang phía trên một phần tử, bạn có thể làm điều này:

.class-name:before {
    content: " ";
    display: block;
    border-bottom: 1px solid #rrggbb;
  }

Chúng được gọi là bộ chọn giả và có thể được sử dụng cho tất cả các loại công cụ. Ngay cả việc duy trì tỷ lệ khung hình trong đó

.class-name:after {
    content: " ";
    display: block;
    border-bottom: 0.5px solid #9E9E9E;
}

4 hoặc

.class-name:after {
    content: " ";
    display: block;
    border-bottom: 0.5px solid #9E9E9E;
}

5 được hỗ trợ.

Ngày 9 tháng 8 năm 2014 lúc 11:05 tối #178440 #178440

__

Người tham gia

Tôi cá là bạn hầu hết mọi người sẽ nghĩ như một quy tắc ngang cho mọi thời đại

Tất nhiên. Tuy nhiên, lưu ý rằng định nghĩa ngữ nghĩa chỉ là một người mới đối với HTML: trong thế giới in ấn, đó luôn luôn là những gì mà nó dành cho.

Mặc dù nó sẽ (và nên) luôn được coi là một quy tắc theo chiều ngang của người Hồi giáo, nhưng những người nghĩ về nó là không tự truyện (có nghĩa là vô nghĩa của Hồi) đã bị nhầm lẫn ngay từ đầu.

Làm cách nào để thêm một đường ngang trong HTML mà không có thẻ HR?

Tôi có thể sử dụng gì thay vì HR trong HTML?

Làm cách nào để chèn một đường ngang trong HTML?

Làm thế nào để bạn vẽ một đường ngang thẳng trong HTML?