应使用语义清晰的 div/span 配合 css 实现垂直分隔线，或在 flex 布局中用 border-left/right 控制；禁用 hr 的 orientation 属性和 transform 旋转，避免布局错位与语义错误。
用 <hr> 最简单，但默认样式丑怎么办
直接写 <hr> 能插入水平分隔线，但垂直分隔线 HTML 没有原生标签。想实现「垂直」效果，得靠 CSS 控制方向或换元素。
常见错误是硬套 <hr> 然后加 transform: rotate(90deg)——这会导致布局错位、响应式失效，且语义错误（<hr> 本意是段落间主题分隔，不是装饰线）。
更合理的方式是用 <div> 或 <code><span></span> 配合宽高 + 背景色，语义清晰、控制自由：
<div class="v-divider"></div>
.v-divider { width: 1px; height: 2rem; background: #ccc; }
立即学习“前端免费学习笔记（深入）”；
Flex 布局里用 border-left 或 border-right 更稳
在按钮组、导航栏、卡片列表等横向排列场景中，垂直分隔线本质是“相邻项之间的间隙装饰”，不该单独占 DOM 节点。
直接给子元素加边框，利用 flex 自动对齐，避免额外元素和定位干扰：
- 给每个子项加
border-left: 1px solid #ddd，然后第一项用border-left: none去掉 - 或者统一加
border-right，最后一项设为none - 注意：若子项高度不一致，边框会不对齐；此时改用
align-items: stretch拉齐
比 <hr> + transform 性能好，也不影响可访问性（没插入无意义节点）。
响应式下垂直线容易消失或错位
固定宽度的垂直线（比如 width: 1px）在高清屏或缩放时可能被渲染为 0 像素，或在移动端被 viewport 缩小导致视觉断裂。
解决方案不是加大像素值，而是换单位：
- 用
min-width: 1px配合width: 0.0625rem（即 1px 在 16px 基准下），rem 单位随根字体缩放更可控 - 避免在
@media里只改颜色不改尺寸——高度/宽度也得同步适配 - 如果用伪元素（
::before/::after）画线，确保content: ""和display: block都写全，否则某些浏览器不渲染
不要用 <hr> 的 orientation 属性
HTML5 曾提案 <hr orientation="vertical">，但从未被任何主流浏览器支持，现在连规范里都删了。
查 MDN 或 Can I Use 都会显示该属性无效。实际写出来就是个被忽略的垃圾属性，还会让代码审查工具报 warning。
真正兼容的做法只有两个：CSS 控制普通元素，或 SVG 内联绘制（适合需要复杂样式或动画的场景）。
复杂点在于，垂直线的位置往往依赖父容器的 padding/margin 计算，一不留神就偏移；建议所有相关尺寸用 CSS 变量统一管理，比如 --divider-size: 1px，改一处全链路生效。
