达不到预期希望完成的效果

预期效果

img

我运行的效果

img

我的代码html

img

代码之css

img

我的疑惑:
进度条设置现实为50.4%,但是现实的时候不是
进度条文字显示的位置
怎么让两个div模块平行排列

  • 我开始以为是span默认display=inline的原因,后来发现你有设置display:inline-block
  • 仔细看才发现,你的js方法不对啊
  • 你用类名选择器获取到多个类名为main的节点集合,得到的text()打印出来其实是50.4%126.4%,你得每个.num节点.text()分别给对应的.main节点宽度。
    let numSpan=$(".num");
    let mainSpan=$(".main");
    numSpan.map((index,item)=>{
    $(mainSpan).eq(index).css("width",item.text());
    })
    

代码别截图啊 粘贴出来

.main{display:flex}