[]富文本排版问题

let div:Laya.HTMLDivElement = new Laya.HTMLDivElement();
let htmlStr:string = "";
 
htmlStr += "<span style='font-weight:bold;font:24px Arial' color='#fafbf9'>累计进行关卡</span>";
htmlStr += "<span style='font-weight:bold;font:48px Arial;valign:top' color='#84ED4A'>3</span>";
htmlStr += "<span style='font-weight:bold;font:24px Arial' color='#fafbf9'>次1</span>";
 
div.innerHTML = htmlStr;
div.style.align = "left";
div.style.valign = "top";
div.style.width = 300;
Laya.stage.addChild(div); 
以上是一段富文本生成代码，效果是这样的：


那个数字3的位置偏的很厉害，有没有什么办法xi修正？