具体是样式的调整问题,有一个点赞的页面,见图只是点赞的部分。我要实现这个❤和后面的数字完成自适应,有两种情况出现。我想实现第二种情况,而不是第一种。img和text是被一个view包在里面的。具体见代码,和效果图,css样式可能是限制了,请css高手帮忙看下,谢谢
,这个是正常图
第一种情况:(不希望的情况)
1个点赞, 【❤ 1 】
1000个点赞, 【❤ 1000】
第二种情况:(希望的情况)
1个点赞, 【 ❤ 1 】
1000个点赞, 【❤ 1000】
可能描述的不够清晰,真正的意思就是图标和数字是分离开的,不管数字如何变动,图标都不会跟着一起动,具体的样式见下图。
<view class="img-support-box" >
<image class="support" src="/pages/images/icon/index/support_cur.png"></image>
<text style="font-size:11px;font-weight: 120;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">1000</text>
</view>
.img-support-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
margin-left: 90rpx;
}
.support {
/* font-size: 24rpx; */
display: block;
width: 40rpx;
height: 40rpx;
border-radius: 30rpx;
margin: 15rpx;
margin-left: 105rpx;
}
求助细心的朋友帮忙看下,谢谢
是这样?
当我无论把数字怎么进行修改时,红心都保持和数字同样的距离,可能我想的简单了,之前调出来过,但是其他元素一动就不行了,代码可能上的不全
之前可能没有表述清楚。我的意思是让图标和数字永远在一个区域同时活动,大概意思是这样的,见图
当我无论把数字怎么进行修改时,红心都保持和数字同样的距离,可能我想的简单了,之前调出来过,但是其他元素一动就不行了,代码可能上的不全
错误:
正确:
没有上传的代码:
给text固定宽度即可
这二种情况描述不是复制粘贴的吗?没看明白这是要表达什么,是要中线对齐的吗?
justify-content: flex-start; // 你这 left 是啥玩意