CSS 垂直线

31 Jan 2025 | 4 分钟阅读

垂直线是表单、表格和其他 HTML 功能的可用元素。我们可以使用 CSS 属性创建单行和多行。我们可以设置边框来获得垂直线；否则，使用 CSS 属性旋转 HTML <hr> 标签。

语法

以下语法用于使用 CSS 创建垂直线。

border-left: 5px solid black;
OR
border-right: 5px solid black;
OR
border-width: 0 5px 0 5px;
border-color: Grey;
border-style: double;

示例

以下示例显示了具有所需颜色、宽度、高度和其他 CSS 样式的垂直线。

示例 1

此示例使用具有基本颜色和尺寸的 `border-left` CSS 属性显示垂直线。

<!DOCTYPE html>
<html>
<head>
<title> Vertical Line in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: lightgrey;
border: 1px solid black;
height: 200px;
width: 280px;
}
.vertical_lines{
border-left: 5px solid black;
height: 80px;
position: absolute;
left: 5%;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Vertical Line in CSS
</h3>
<p id = "class2">
We can see simple and easy vertical lines.
</p>
<div class = "vertical_lines"> </div>
</div>
</body>
</html>

输出

输出显示了使用 CSS 的基本垂直线。

示例 2

此示例使用具有基本颜色和尺寸的 `border-right` CSS 属性显示垂直线。

<!DOCTYPE html>
<html>
<head>
<title> Vertical Line in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: lightgrey;
border: 1px solid black;
height: 200px;
width: 280px;
}
.vertical_lines{
border-right: 5px solid red;
height: 80px;
position: absolute;
left: 5%;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Vertical Line in CSS
</h3>
<p id = "class2">
We can see a simple vertical line per the required size and color.
</p>
<div class = "vertical_lines"> </div>
</div>
</body>
</html>

输出

输出显示了使用 CSS 的基本垂直线。

示例 3

此示例使用 `border-left` 和 `border-right` CSS 属性显示具有基本颜色和尺寸的垂直线。

<!DOCTYPE html>
<html>
<head>
<title> Vertical Line in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: lightgrey;
border: 1px solid black;
height: 200px;
width: 280px;
}
.vertical_lines{
border-right: 5px solid red;
border-left: 5px solid red; 
width:20px;
height: 80px;
position: absolute;
left: 5%;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Vertical Line in CSS
</h3>
<p id = "class2">
We can see two simple vertical lines per the required size and color.
</p>
<div class = "vertical_lines"> </div>
</div>
</body>
</html>

输出

输出显示了使用 CSS 的两条垂直线。

示例 4

此示例使用双边框属性显示垂直线。

<!DOCTYPE html>
<html>
<head>
<title> Vertical Line in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: lightgrey;
border: 1px solid black;
height: 200px;
width: 280px;
}
.vertical_lines{
border-right: 5px double black;
border-left: 5px double red;
width:20px;
height: 80px;
position: absolute;
left: 5%;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Vertical Line in CSS
</h3>
<p id = "class2">
We can see two simple vertical lines per the required size and color.
</p>
<div class = "vertical_lines"> </div>
</div>
</body>
</html>

输出

输出显示了使用 CSS 的两条垂直线。

示例 5

此示例在 `div` 标签或内容的开头和结尾显示两条垂直线。我们可以使用标签的左右边框在任何容器上创建垂直线。

<!DOCTYPE html>
<html>
<head>
<title> Vertical Line in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height: 150px;
width: 320px;
border-right: 8px solid navy;
border-left: 8px solid navy;
position: absolute;
left: 5%;
padding-left: 2%
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Vertical Line in CSS
</h3>
<p id = "class2">
We can see two simple vertical lines per the required size and color.
</p>
<div class = "vertical_lines"> </div>
</div>
</body>
</html>

输出

输出显示了主 `div` 标签上的两条垂直线。

示例 6

此示例使用边框属性显示 `div` 标签或内容的垂直线。使用 `border-width`、`style` 和 `color` 属性，我们可以在任何容器上创建垂直线。

<!DOCTYPE html>
<html>
<head>
<title> Vertical Line in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height: 150px;
width: 320px;
border-width: 0 5px 0 5px;
border-color: Grey;
border-style: double;
position: absolute;
left: 2%;
padding-left: 1%;
padding-right: 1%;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Vertical Line in CSS with Border Width
</h3>
<p id = "class2">
We can see two simple vertical lines per the required width, style, and color.
</p>
</div>
</body>
</html>

输出

输出显示了带有边框的 `div` 标签上的垂直线。

结论

CSS 中的垂直线有效地显示了容器和其他功能，并使网页、表格和表单更具吸引力。

下一主题Css-border-opacity

CSS 垂直线

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 垂直线

语法

示例

结论

相关帖子

EM 在 CSS 中的完整形式

Conditional CSS Material UI

CSS Strikethrough

CSS Margin-left

Responsive Image Gallery HTML CSS

CSS Layers

CSS Style Parent based on Child

CSS Box-Shadow Bottom Only

CSS Text Anchor

CSS Styles for Dropdownlist

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器