如果你希望使用更简单的方法来创建一个竖线,可以考虑使用
标签并结合一些CSS样式来调整它的外观。虽然
标签通常用于水平线,但是可以通过CSS来调整它的样式,使其看起来像一个竖线。
以下是一个示例代码,演示如何通过
标签和少量的CSS来创建一个竖线效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Line with hr Tag</title>
<style>
hr.vertical-line {
border: none; /* 移除默认边框 */
border-left: 1px solid black; /* 设置左边框为实线,颜色为黑色 */
height: 200px; /* 设置竖线的高度 */
width: 0; /* 竖线默认宽度为0,仅显示边框 */
margin: 0 auto; /* 居中显示竖线 */
}
</style>
</head>
<body>
<hr class="vertical-line">
</body>
</html>
再简单的方式,行内样式:
<hr style="border: none; /* 移除默认边框 */
border-left: 1px solid black; /* 设置左边框为实线,颜色为黑色 */
height: 200px; /* 设置竖线的高度 */
width: 0; /* 竖线默认宽度为0,仅显示边框 */
margin: 0 auto; /* 居中显示竖线 */">