错误在于直接在间插入会破坏语义结构、导致屏幕阅读器误读、css失效且默认换行；正确做法是用border-right或::after伪元素实现横向分隔，兼顾语义、样式与响应式。
用 <hr> 实现横向列表分割线容易错在哪
直接在 <li> 之间放 <hr> 看似合理，但会破坏列表语义结构，导致屏幕阅读器误读、CSS 选择器失效，且默认 <hr> 是块级元素，会换行——你看到的不是“横向分割”，而是“每项下面横一条线”。
真正要的是视觉上横向排列、项间有分隔，而非结构上插入分隔符。
- 别把
<hr>当装饰元素滥用；它语义是“主题转换”，不是“画条线” - 浏览器对
<hr>的默认 margin 会让列表项间距失控 - Flex 或 Grid 布局下，
<hr>会脱离容器流，反而难对齐
用 border-right 做内联分割线最稳妥
适用于 display: inline-flex 或 display: flex 横向列表，每个 <li> 右侧加边框，最后一项去掉，就能干净分隔。
- 首页
- 关于
- 联系
CSS 这样写：
.inline-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.inline-list li {
padding: 0 16px;
border-right: 1px solid #ddd;
}
.inline-list li:last-child {
border-right: none;
}
- 用
border-right而非border-left，避免首项多出空白边 - 如果列表项含链接，确保
a标签也继承 padding，不然点击区域变小 - 移动端需注意：过窄屏幕下，
border-right可能挤压文字，建议搭配flex-wrap: wrap或媒体查询
用伪元素 ::after 控制分割线位置更灵活
当需要自定义分割线长度、偏移或图标（比如 |），伪元素比边框更可控，且不占文档流。
.inline-list li:not(:last-child)::after {
content: "|";
margin: 0 8px;
color: #999;
}
-
content: "|"是最简方案；若要用细线，可设content: ""+border-right在伪元素上 - 必须加
:not(:last-child)，否则末尾也会出现多余符号 - 字体渲染下竖线可能粗细不均，用
font-family: monospace或 SVG 替代更稳
响应式断点时分割线要不要保留
横向列表在手机上常转为竖排，此时还留着右侧边框或竖线，视觉上就变成每行右边一列空白——这是最容易被忽略的兼容点。
- 用
@media (max-width: 768px)清掉border-right和::after - 竖排时若仍需分隔，改用
margin-bottom或底部边框更自然 - 别只靠
display: block切换，记得重置所有与横向相关的样式（包括flex-direction）
border-right 最省心；要支持国际化或动态长度，伪元素更可靠；而硬塞 <hr> 进列表，基本等于给自己埋个无障碍雷。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
