错误在于直接在间插入会破坏语义结构、导致屏幕阅读器误读、CSS失效且默认换行；正确做法是用border-right或::after伪元素实现横向分隔，兼顾语义、样式与响应式。

用

---

实现横向列表分割线容易错在哪

直接在

之间放

---

看似合理，但会破坏列表语义结构，导致屏幕阅读器误读、CSS 选择器失效，且默认

---

是块级元素，会换行——你看到的不是“横向分割”，而是“每项下面横一条线”。

真正要的是视觉上横向排列、项间有分隔，而非结构上插入分隔符。

• 别把

  ---

  当装饰元素滥用；它语义是“主题转换”，不是“画条线”
• 浏览器对

  ---

  的默认 margin 会让列表项间距失控
• Flex 或 Grid 布局下，

  ---

  会脱离容器流，反而难对齐

用 border-right 做内联分割线最稳妥

适用于 display: inline-flex 或 display: flex 横向列表，每个

右侧加边框，最后一项去掉，就能干净分隔。

• 首页
• 关于
• 联系

CSS 这样写：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

.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 最省心；要支持国际化或动态长度，伪元素更可靠；而硬塞

---

进列表，基本等于给自己埋个无障碍雷。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！