跳到主要内容
Termlib

UI 组件 · 基础

分割线

Divider

也叫：分隔线、分隔符、Separator、hr

一条细细的横线或竖线，用来把相邻的两块内容隔开，有时中间还嵌一段小字。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

登录表单的「登录」按钮下方加一条带文字的分割线：左右两段 1px 浅灰线，中间是灰色小字「或」，上下各留 16px 间距，下面并排放「微信登录」「GitHub 登录」按钮；表格操作列里的「编辑」「删除」之间用高 12px 的竖向分割线隔开。

发给

01判断

你的内容是这样吗？

对照两列，确认分割线是不是你要找的。

符合这些情况，用分割线

  • 同一张卡片或表单里，需要把两组内容明确分开
  • 一行里并排几个文字链接或操作，需要细小的分隔
  • 登录页等场景需要用「或」隔开两种方式

是这些情况，换成别的

  • 区块之间已经有足够的留白或背景色区分

  • 列表每一项之间都要分隔时，用间距或斑马纹更清爽

  • 需要表达层级或分组时，用分组标题比线条清楚

    改用标题

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    每个区块上下都画分割线，页面看起来像填满格子的表格

  2. 02

    分割线颜色太深太粗，比内容本身还抢眼

  3. 03

    用空的 div 加边框模拟分割线，却忘了上下间距，线和文字贴在一起

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

一条 1px 的横线或竖线，可在中间或一侧嵌入一段说明文字。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一条横贯内容宽度的浅灰细线
  2. 2细线中间可能断开，嵌着「或」之类的小字
  3. 3一行文字链接之间的短竖线

04解释

详细解释

分割线是最简单的组件：一条 1px 的浅灰色线，横向时分隔上下两段内容，纵向时分隔同一行里的几个文字链接（比如「编辑 | 删除」）。它也可以在中间嵌一段文字，常见的是登录页的「—— 或 ——」，下面接第三方登录按钮。HTML 原生的 <hr> 就是一条分割线，shadcn/ui 里叫 Separator。

分割线用多了会让页面像一张表格，显得琐碎。很多时候用 留白 拉开间距、或者用卡片的背景色区分区块，比画一条线更干净。一般规则是：能用间距分开的就不用线，只有两块内容挨得很近、又需要明确分界时才用分割线。

开发者信息
术语 ID
component-divider
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • hr
  • [role="separator"]
  • .ant-divider
  • .el-divider
  • [class*="MuiDivider-root"]
  • .arco-divider
  • .t-divider
  • .n-divider
  • [data-slot="separator"]
  • .vr
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • divider
  • separator
  • hr
  • split-line
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Divider
  • Separator
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30