解决 Blazor 中因标签换行导致的行内元素空隙问题
发布日期: 2023-08-10 04:41:37 来源: 博客园


【资料图】

实践过不同前端框架的朋友应该都知道,对于同一个样式,在不同框架上的表现都会有不同,时时需要做“适配”,在 Blazor 上也不例外。在做 Ant Design Blazor 时就深有体会,因为我们是同步官方的样式,他们的样式只考虑了React 上的实现,除非有人专门提 PR,否则都不会特别考虑其他框架的实现。本文就介绍一个典型问题。

当我们使用 Razor 模板时,特别是使用 iffor等语句块时,都会导致 HTML 元素或者组件换行。而运行后输出的 HTML 也会换行,而浏览器对于HTML换行会转换成空格,空格又由于默认或继承的字体大小,让元素之间出现空隙。这对于本来就要换行的块状元素没什么问题,但对于想要在一行显示的行内元素,就会有一个空隙。下面是一个例子:

1 2 2

结果可以看出,数字之间和数字周围都有空隙:

而我们看下不换行是怎样的:

122

可以看到数字之间没有空隙。那么,怎么解决呢?

其实这属于 css 的一个常见问题,解决方法也通用的,就是想办法使那些从换行转换的空格的字号变为 0,使空隙消失,并恢复子元素的字号:

1 2 2

结果:

关键词:

相关文章

  • 解决 Blazor 中因标签换行导致的行内元素空隙问题

  • minyuezhuan(关于minyuezhuan的基本详情介绍)

  • 上半年前海GDP增长15.8% 前海金融发展再迎利好

  • 宝钢股份与中石化、壳牌、巴斯夫达成四方CCUS项目联合研究协议

  • 一路狂飙背后,东鹏饮料都下了哪些“狠”功夫

  • Canyon猪妹全场负作用 Keria峡谷野牛横冲直撞 T1先收第一分

  • 骑电动车保持不住平衡怎么办(骑电动车平衡诀窍)

  • 梦回S8?快进到LPL夺冠?S13目前为止已有多个事件与S8相似

  • 2023中国网球公开赛正式开票

  • 丰田普锐斯帮助日志P0607控制模块性能

  • 研究称斯巴鲁在品牌忠诚度方面排名第三

  • 101的365次方和099的365次方图片(1 01的365次方)

  • 小时候用过的这些5角硬币,都涨了!

  • 北京遭遇罕见特大暴雨 造成严重灾害

  • 丹东市第三十二届海葬活动报名通告

  • 与百老汇明星作曲家一起开启音乐剧《人间失格》的华丽音乐之旅

  • 全国​区域性股权市场企业创新发展指数报告发布,蓝海股权位居第

  • 文明青岛随手拍|清理 “蜘蛛网”,绘出“五线谱”,“随手拍”

  • 中国东航:股东均瑶集团拟清仓减持155,916,009 股

  • 成品油价四连涨,92号汽油重回“8元时代”

热点图集