HTML元素中的行级与块级元素不能放在一行。

最近在工作中忽然发现了一个小问题,本来以为自己html标签学的挺好,今天终于明白,一直都是个菜鸟。
背景:
项目使用的是ant design的Grid布局,使用Row和Col。代码如下:

<Col>
    <div style={{display: flex}}>
        <Icon type="user" style={{ fontSize: 20,color: '#67a8e4'}}/>
        <p>人数:<span style={{color: 'deepskyblue'}}>358</span></p>
    </div>
</Col>

想要的样子是图标居左文字居右,并且都是垂直居中,但出来的样子是这样的:
这里写图片描述
???
那就给div加个align-items: center;好了,然后变成了
这里写图片描述
这很明显不科学。如果去掉flex布局,图标和文字将分为上下两行
这时我们就应该注意到,图标和文字不是一样的,图标是用<i>标签配合::before伪元素实现的,经查是行级元素,而<p>是块级元素,二者是不能放在一行的。
所以只要将<p>改为行级元素<span>即可,再加上flex布局及垂直居中
正确效果是这样
这里写图片描述
或者将div直接替换为Row,不必加flex也能达到同样的效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值