Hướng dẫn how to draw line in html css - cách vẽ đường thẳng trong html css

Tôi muốn làm một div là một dòng. Đây là HTML của tôi:

Và ở đây CSS của tôi:

.line{
    width: 112px;
    height: 47px;
    border-bottom: 1px solid black;
    position: absolute;
    }

Không có gì đang hiển thị, có lẽ có gì đó không ổn trong CSS của tôi, nhưng tôi không thể thấy những gì.

Hỏi ngày 28 tháng 9 năm 2015 lúc 9:22Sep 28, 2015 at 9:22

4

Nó làm việc cho tôi

 .line{
width: 112px;
height: 47px;
border-bottom: 1px solid black;
position: absolute;
}

Đã trả lời ngày 28 tháng 9 năm 2015 lúc 9:23Sep 28, 2015 at 9:23

Mukul Kantmukul KantMukul Kant

6.9925 Huy hiệu vàng35 Huy hiệu bạc53 Huy hiệu Đồng5 gold badges35 silver badges53 bronze badges

Không cần CSS, bạn chỉ có thể sử dụng thẻ HR từ HTML

Đã trả lời ngày 24 tháng 11 năm 2017 lúc 14:14Nov 24, 2017 at 14:14

ProgloverprogloverProgLover

5116 Huy hiệu bạc12 Huy hiệu đồng6 silver badges12 bronze badges

$('.line').click(function() {
  $(this).toggleClass('red');
});

.line {
  border: 0;
  background-color: #000;
  height: 3px;
  cursor: pointer;
}
.red {
  background-color: red;
}

click the line

Đã trả lời ngày 28 tháng 9 năm 2015 lúc 10:07Sep 28, 2015 at 10:07

ImgauravimgauravimGaurav

1.0337 Huy hiệu bạc14 Huy hiệu đồng7 silver badges14 bronze badges

Nếu Div có một số nội dung bên trong, đây sẽ là cách thực hành tốt nhất để có một dòng hoặc dưới DIV và duy trì khoảng cách nội dung với DIV

.div_line_bottom{
 border-bottom: 1px solid #ff0000;
 padding-bottom:20px;
}

.div_line_top{
border-top: 1px solid #ff0000;
padding-top:20px;
}

Đã trả lời ngày 28 tháng 9 năm 2015 lúc 12:33Sep 28, 2015 at 12:33

CreativePscreativepsCreativePS

1.1077 huy hiệu bạc15 huy hiệu đồng7 silver badges15 bronze badges

Đã trả lời điều này chỉ để nhấn mạnh nhận xét @rblarsen về câu hỏi:@rblarsen comment on question :

Bạn không cần các thẻ kiểu trong tệp CSSstyle tags in the CSS-file

Nếu bạn xóa thẻ kiểu khỏi tệp CSS của bạn, nó sẽ hoạt động.style tag from your css file it will work.

Đã trả lời ngày 8 tháng 8 năm 2019 lúc 6:13Aug 8, 2019 at 6:13

Bạn thay đổi vị trí tuyệt đối thành người quan hệ

Đã trả lời ngày 11 tháng 9 năm 2021 lúc 13:23Sep 11, 2021 at 13:23

1

W3Schools được tối ưu hóa cho việc học và đào tạo. Ví dụ có thể được đơn giản hóa để cải thiện việc đọc và học tập. Hướng dẫn, tài liệu tham khảo và ví dụ được xem xét liên tục để tránh lỗi, nhưng chúng tôi không thể đảm bảo tính chính xác đầy đủ của tất cả các nội dung. Trong khi sử dụng W3Schools, bạn đồng ý đã đọc và chấp nhận các điều khoản sử dụng, cookie và chính sách bảo mật của chúng tôi.

Bản quyền 1999-2022 bởi dữ liệu refsnes. Đã đăng ký Bản quyền. W3Schools được cung cấp bởi W3.CSS.
W3Schools is Powered by W3.CSS.

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Đơn giản ngu ngốc, phải không? Nó là! Nhưng nó rất vui khi nghĩ về trong vài phút và đếm một loạt các cách khác nhau mà chúng ta có thể làm điều đó. Và tôi có nghĩa là gì bởi một dòng? Chúng tôi chủ yếu nói về một đường ngang rắn 1PX, nhưng chúng tôi sẽ giảm bớt một chút và nói về các dòng khác. CSS có thể vẽ một dòng từ bất kỳ điểm nào đến bất kỳ điểm nào không? Không thực sự, thực sự - trừ khi chúng ta nhận được khá lạ mắt với SVG đó là.

Làm thế nào tôi có thể vẽ một dòng trong CSS?

Những gì được sử dụng để vẽ một dòng trong HTML?