Divider分割线在Flex布局中不显示,怎么解决?

迷人的常青 阅读 23

我在用 Flex 布局做用户信息展示,中间加了个 <Divider />,但页面上完全看不到分割线,其他元素都正常显示。是不是 Flex 会影响 Divider 的渲染?

我试过给 Divider 加固定宽度,也试过设置 display: block,都没用。控制台也没报错,就是死活不显示。

<div style="display: flex; align-items: center;">
  <span>用户名</span>
  <Divider vertical />
  <span>2023-10-01</span>
</div>
我来解答 赞 9 收藏
二维码
手机扫码查看
1 条解答
子豪
子豪 Lv1
flex布局下vertical divider需要设置高度才能显示,默认高度是0。试试这样改:

.ant-divider-vertical {
height: 1em;
}


或者直接在组件上写行内样式:



flex容器里元素默认会stretch拉伸,但divider的vertical模式高度默认是0。这坑我也踩过,加了高度就好了。
点赞
2026-03-08 05:00