在HTML中绘制竖线有多种方法，具体选择取决于实际需求、浏览器兼容性以及性能考虑,以下是几种常见实现方式及其详解：
基于CSS Border属性的竖线
原理：通过为元素设置单侧边框并调整高度实现竖线效果。
实现步骤：
- 创建一个空div元素，并设置固定宽度（如1px）和高度。
- 使用
border-left或border-right属性设置边框样式。
示例代码：<div class="vertical-line" style="border-left: 1px solid #000; height: 200px;"></div>
优点：简单灵活，支持颜色、宽度调整，兼容所有浏览器。
缺点：需手动设置高度,响应式布局中可能需配合媒体查询。
使用SVG绘制矢量竖线
原理：利用SVG的<line>标签绘制精确的竖直线条。
实现步骤：
- 内嵌或外部引入SVG代码。
- 设置
x1/x2为固定值，y1/y2决定线条长度。
示例代码：<svg width="100%" height="200px"> <line x1="50" y1="0" x2="50" y2="200" stroke="black" stroke-width="1"/> </svg>
优点：矢量图形，缩放不失真，适合高精度设计。
缺点：语法较复杂,需注意SVG与页面元素的坐标系统。
Flexbox布局实现动态竖线
原理：通过Flex容器的方向调整，将边框作为分隔线。
实现步骤：
- 设置父容器为
display: flex，方向为列（column）。 - 在子元素之间插入带边框的元素。
示例代码：<div style="display: flex; flex-direction: column;"> <div>内容1</div> <div style="border-top: 1px solid #000;"></div> <div>内容2</div> </div>
优点：自动适应容器尺寸，适合响应式布局。
缺点：需额外包裹容器,结构稍显冗余。
伪元素（::before/::after）生成竖线
原理：利用CSS伪元素插入内容，避免修改HTML结构。
实现步骤：
- 为目标元素设置伪元素样式。
- 通过
content属性添加空白或符号，配合border形成竖线。
示例代码：<div class="with-line"></div> <style> .with-line::before { content: ""; border-left: 2px solid red; height: 100px; display: inline-block; } </style>优点：无需新增DOM节点，纯CSS实现。
缺点：高度控制依赖样式,复杂布局可能受限。
直接使用HTML实体或Unicode字符
原理：插入特殊字符“|”作为竖线。
实现步骤：
- 在文本中直接输入
|或键盘输入。 - 通过CSS调整颜色和字体间距。
示例代码：<p>左栏|右栏</p> <style> p { color: #000; font-family: monospace; } </style>优点：快速简便，适合纯文本场景。
缺点：无法自定义宽度,高度受字体限制。
方法对比表
| 方法 | 适用场景 | 灵活性 | 兼容性 |
|---|---|---|---|
| CSS Border | 通用竖线 | 高（颜色/宽度可调） | 全平台支持 |
| SVG | 高精度图形 | 中等（需坐标计算） | IE11+ |
| Flexbox | 响应式布局分隔线 | 高（自适应容器） | IE10+ |
| 伪元素 | 不修改HTML结构的装饰性竖线 | 中等（依赖CSS） | 现代浏览器为主 |
| HTML实体 | 纯文本内的简单竖线 | 低（仅颜色调整） | 所有浏览器 |
FAQs
如何让竖线在不同屏幕尺寸下自动伸缩？
答：若使用CSS Border方法，可将高度设为百分比（如height: 100%），并确保父元素高度可变，对于SVG竖线，设置width和height为100%即可自适应容器。
为什么用<hr>标签画竖线效果不理想？
答：<hr>默认是水平线，虽然可通过CSS旋转（如transform: rotate(90deg)）改为竖线，但会导致宽度不一致且难以控制位置，建议优先使用div + border或
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/74859.html
