请问是否有一个父组件(比如:antd的某个组件)可以让它的子元素们进行间隔开来?

作者站长头像
站长
· 阅读数 5

请问下是否有方法或者现有的组件可以做到子组件都有一定的间隔?

我在使用antd的时候请问是否有一个父组件(比如:antd的某个组件)可以让它的子元素们进行间隔开来?

默认,两个按钮的布局是紧挨着的,

1、请问是否有一个父组件(比如:antd的某个组件)可以让它们进行间隔开来?2、是否有方便的方法比如:写一个父div里面有style,让所有的子组件进行间隔开来?

回复
1个回答
avatar
test
2024-06-29

antd 提供了 Space 组件。

https://ant.design/components/space-cn/

CSS 的话可以直接 * 匹配全部后代,然后加 margin 处理:

.space > * {
    margin-left: 8px;
    margin-right: 8px;
}
<div class="space">
  <div>A</div>
  <div>B</div>
</space>

最初 Space 组件其实就是这样简单粗暴的。当然了现在的实现还是挺复杂的,要考虑后代元素本身是否已经有 margin、原本 display 是什么,还要考虑方向、折行等等。感兴趣可以自己阅读源码。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容