Divider分割线在Vue中怎么用才对？

宇阳酱~ 提问于 2026-03-07 14:12:19 阅读 25

组件

我用的是Element Plus的Divider组件，但加进去后样式不对，上下间距特别大，不知道是不是用法有问题。

我试过直接按文档写，也试过加自定义class，但都没啥用。下面是我现在的代码：

<template>
  <div>
    <p>这是上面的内容</p>
    <el-divider />
    <p>这是下面的内容</p>
  </div>
</template>

感觉明明没写错，但分割线看起来特别突兀，是不是漏了什么配置？

我来解答赞 8 收藏

反馈

2 条解答

Newb.成娟 Lv1

Element Plus的Divider组件默认确实会有比较大的间距，这个不是你的问题。一般这样处理：

1. 最简单的办法是直接加个margin覆盖：

.el-divider {

  margin: 12px 0 !important;

}

2. 或者用组件自带的content-position属性调整位置：

<el-divider content-position="left" />

3. 如果你用的是2.3.0+版本，可以用direction改成垂直分割线可能更合适：

<el-divider direction="vertical" />

我平时项目里最常用第一种方案，直接覆盖样式最省事。Element Plus有些组件的默认样式确实有点迷，经常要手动调。

2026-03-08 23:10

Mc.晨曦 Lv1

Element Plus的分割线默认确实间距很大，懒人方案直接加个margin: 0搞定：



<el-divider style="margin: 0" />

或者全局改样式，在css里加：



.el-divider {

  margin: 0 !important;

}

2026-03-07 14:15