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
Vertical Line in html
/* 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%;
}
Vertical Line using HTML and CSS
using border-right, height and position property
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
Vertical Line in html
/* 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%;
}
Vertical Line using HTML and CSS
vertical line using border-left, height and position property
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
Vertical Line in html
body {
text-align: center;
}
hr {
transform: rotate[90deg];
}
Vertical Line using hr Transform Property
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
Vertical Line in html
/* 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%;
}
Vertical Line using HTML and CSS
double vertical line
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
Vertical Line in html
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;
}
Vertical Line using HTML and CSS
dotted vartical line.
dashed vartical line.
solid vartical line.
double vartical line.
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
Vertical Line in html
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;
}
vertical line with paragraph container
vertical line with paragraph section container
vertical line with article container
Mã vận hành
Đầu ra
Làm cách nào để chèn một đường thẳng đứng giữa các từ trong HTML?
Làm thế nào để bạn đặt một ranh giới giữa văn bản trong HTML?
tag. The
tag does not have an end tag. You can also add additional lines between paragraphs by using the
tags.