Bạn có thể có một vài lý do để tạo một đường thẳng đứng trên trang web của bạn nhưng HTML không có bất kỳ yếu tố nào cho các đường thẳng đứng. Mặc dù HTML chỉ có phần tử cho một đường ngang; Nhưng vẫn còn nhiều cách để tạo một đường thẳng đứng trong HTML như đã đề cập dưới đây:
- Sử dụng thuộc tính CSS Border
- Sử dụng thuộc tính CSS chiều rộng và chiều cao CSS
- Sử dụng thuộc tính chuyển đổi nhân sự
Ở đây trong bài viết này, chúng tôi đã giải thích tất cả các cách có thể để tạo đường thẳng đứng trong HTML:
1) Sử dụng thuộc tính Biên giới, Chiều cao và Vị trí CSS
<!-- It creates a vertical line using border-right, height and position property. --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vertical Line in html</title> <style> /* Applying the style on the complete body of html page */ body { text-align: center; } /* CSS to add vertical line in the right */ .verticalLine { height: 300px; border-right: 1px solid #000900; position: absolute; right: 50%; } </style> </head> <body> <h2>Vertical Line using HTML and CSS</h2> <div class="verticalLine"> <!-- Dummy Text start --> <p> using border-right, height and position property </p> <!-- Dummy Text ends --> </div> </body> </html>Mã vận hành
Đầu ra
2) Đường thẳng đứng sử dụng thuộc tính Biên giới, chiều cao và vị trí CSS
<!-- It creates a vertical line using border-left, height and position property. --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vertical Line in html</title> <style> /* Applying the style on complete body of html page */ body { text-align: center; } /* CSS to add vertical line in the left */ .verticalLine { height: 300px; border-left: 1px solid #000900; position: absolute; left: 50%; } </style> </head> <body> <h2>Vertical Line using HTML and CSS</h2> <div class="verticalLine"> <!-- Dummy Text start --> <p> vertical line using border-left, height and position property </p> <!-- Dummy Text ends --> </div> </body> </html>Mã vận hành
Đầu ra
2) Đường thẳng đứng sử dụng thuộc tính Biên giới, chiều cao và vị trí CSS
3) Đường thẳng đứng sử dụng HR & NBSP; chuyển đổi thuộc tính
<!-- HTML code to demonstrate vertical lines from horizontal line using transform function --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vertical Line in html</title> <style> body { text-align: center; } hr { transform: rotate(90deg); } </style> </head> <body> <h2>Vertical Line using hr Transform Property</h2> <hr> </body> </html>Mã vận hành
Đầu ra
2) Đường thẳng đứng sử dụng thuộc tính Biên giới, chiều cao và vị trí CSS
<!-- It creates a double vertical line using border-right, height and position property . --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vertical Line in html</title> <style> /* Applying the style on complete body of html page */ body { text-align: center; } /* CSS to add vertical line in the right */ .verticalLine { height: 300px; border-style: none double none none; position: absolute; right: 50%; } </style> </head> <body> <h2>Vertical Line using HTML and CSS</h2> <div class="verticalLine"> <!-- Dummy Text start --> <p> double vertical line </p> <!-- Dummy Text ends --> </div> </body> </html>Mã vận hành
Đầu ra
2) Đường thẳng đứng sử dụng thuộc tính Biên giới, chiều cao và vị trí CSS
<!-- Html code to demonstrate the multiple type of vertical lines --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vertical Line in html</title> <style> div.dotted { border-style: none dotted none none; margin: 10px; padding: 10px; right: 55.5%; position: absolute; } div.dashed { border-style: none dashed none none; margin: 10px; padding: 10px; right: 66%; position: absolute; } div.solid { border-style: none solid none none; margin: 10px; padding: 10px; right: 77%; position: absolute; } div.double { border-style: none double none none; margin: 10px; padding: 10px; right: 88%; position: absolute; } </style> </head> <body> <h2>Vertical Line using HTML and CSS</h2> <div class="dotted">dotted vartical line.</div> <div class="dashed">dashed vartical line.</div> <div class="solid">solid vartical line.</div> <div class="double">double vartical line.</div> </body> </html>Mã vận hành
Đầu ra
2) Đường thẳng đứng sử dụng thuộc tính Biên giới, chiều cao và vị trí CSS
<!-- HTML code to demonstrate vertical lines on different containers --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vertical Line in html</title> <style> body { text-align: center; } .paragraphWithVertcalLine { border-right: 1px solid #000; width: 300px; height: 300px; } .sectionWithVertcalLine { border-right: 1px solid #000; width: 300px; height: 300px; } .articleWithVertcalLine { border-right: 1px solid #000; width: 300px; height: 300px; } </style> </head> <body> <p class="paragraphWithVertcalLine"> vertical line with paragraph container </p> <section class="sectionWithVertcalLine"> vertical line with paragraph section container </section> <article class="articleWithVertcalLine"> vertical line with article container </article> </body> </html>Mã vận hành
Đầu ra