Hướng dẫn how to draw a line in html css - cách vẽ một đường trong html css

Question

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

Nội dung chính Show

Làm thế nào để bạn tạo một dòng trong HTML CSS?
Thêm dòng bằng CSS nội bộ ..
Làm cách nào để tạo một dòng trong HTML?
Làm cách nào để chèn một đường ngang trong HTML?

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link href="clickable.css"  type="text/css" rel="stylesheet" />
    </head>
    <body >
        <div class="line"></div>
    </body >
</html>

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

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

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;
}

<div class="line"></div>

Đã 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.9805 Huy hiệu vàng34 Huy hiệu bạc52 Huy hiệu Đồng5 gold badges34 silver badges52 bronze badges

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

<hr />

Đã 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr class="line"></hr>
<p>click the line</p>

Đã 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.

Đơ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 để bạn tạo một dòng trong HTML CSS?

Bước 1: Đầu tiên, chúng tôi phải nhập mã HTML trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp HTML hiện có trong trình soạn thảo văn bản trong đó chúng tôi muốn thêm dòng ngang ...

.

Thêm dòng bằng CSS nội bộ ..

.

Thêm dòng bằng CSS nội bộ ..

Thêm đường ngang bằng thẻ: Thẻ quy tắc ngang () được sử dụng cho mục đích chèn các đường ngang vào tài liệu HTML để phân tách các phần của tài liệu.Nó là một thẻ trống hoặc không ghép đôi có nghĩa là không cần thẻ đóng.

Làm cách nào để tạo một dòng trong HTML?

Để tạo một đường ngang trong HTML, hãy sử dụng phần tử.Bạn có thể đặt phần tử - là viết tắt của quy tắc ngang của Cameron - bất cứ nơi nào bạn muốn tạo một đường ngang trên một trang web.Giống như phần tử IMG, phần tử là một phần tử trống rỗng vì nó không có thẻ đóng.use the

element. You can place the

element — which stands for “horizontal rule” — wherever you want to create a horizontal line across a web page. Like the img element, the

element is an “empty element” because it does not have a closing tag.

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

Thẻ HTML.Thẻ trong HTML là viết tắt của quy tắc ngang và được sử dụng để chèn quy tắc ngang hoặc ngắt chủ đề trong trang HTML để phân chia hoặc riêng biệt các phần tài liệu.Thẻ là một thẻ trống và nó không yêu cầu thẻ cuối.Được sử dụng để chỉ định sự liên kết của quy tắc ngang.. The

tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The

tag is an empty tag, and it does not require an end tag. Used to specify the alignment of the horizontal rule.

programming html Html5 draw line Horizontal line CSS Horizontal line HTML Horizontal rule Dash line css CSS point line