代码如下
<view class="box"> <text class="a">¥</text> <text class="b">6.00</text> <text class="c">12.00</text></view>.box{ height:100rpx; display:flex; flex-direction: row; align-items: flex-end; background-color: #FF2D4B;}.a{ font-size: 20rpx;}.b{ font-size: 40rpx;}.c{ font-size: 28rpx;} |
运行效果：
期望：
就是希望a,b,c三个类底部对其。。为什么没对齐呢？
把box中的align-items: flex-end;改成align-items: baseline;
我觉得把line-height:1;去掉
align-items: flex-end;
改成
align-items: baseline;
这样好看点
确实能够对齐，但是会导致离底部有点距离
代码片段：https://developers.weixin.qq.com/s/VjQdirm87065
试一下 给 .a .b .c 一个和size一样的高度，先变成块级元素
可以对其，倒是会导致超出底部。
代码片段：https://developers.weixin.qq.com/s/U3Pc1rmV7Y6l
这个时候去调整一下line-height 的大小，就可以控制位置了，没有太完美的了
给box加个 line-height: 1; 能好吗？你这个看着怎么这么怪
好了一点，但是还是不太齐
能做个代码片段吗？
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
https://developers.weixin.qq.com/s/bGM30rmn7H6H
额。。。你这个已经到底了啊。。字体问题了。。非要把数字靠底，那你line-height:0.9吧
如果是让你布局，你会怎么做呢？