Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Space 换行间距问题 #6840

Open
caijf opened this issue Mar 12, 2025 · 4 comments
Open

Space 换行间距问题 #6840

caijf opened this issue Mar 12, 2025 · 4 comments

Comments

@caijf
Copy link
Contributor

caijf commented Mar 12, 2025

Version of antd-mobile

5.39.0

Description

由于 .adm-space-item 使用的是margin-right,在有换行的情况下,前面行的尾部会产生多余留白。

Image

部分情况下会导致大量留白。

Image


是否考虑使用 .adm-space-horizontal 设置 gap: var(--gap-horizontal),效果如下:

Image

@zombieJ
Copy link
Member

zombieJ commented Mar 12, 2025

因为老的手机浏览器不支持 gap css,这个是妥协的产物……

@caijf
Copy link
Contributor Author

caijf commented Mar 12, 2025

因为老的手机浏览器不支持 gap css,这个是妥协的产物……

那也可以给 .adm-space-horizontal 设置 margin-right: calc(var(--gap-horizontal) * -1),效果如下:

Image

@zombieJ
Copy link
Member

zombieJ commented Mar 12, 2025

可以的,需要检测一下是否有元素,如果有的话就加一个。方案都给,顺道来个 PR?~

@caijf
Copy link
Contributor Author

caijf commented Mar 12, 2025

可以呀,我明天看下。理论上没有子元素的时候,高度为 0 ,设置负间距也不影响。

Image

其他还需要看下使用 Space 的相关组件和示例会不会有影响。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants