小程序进度条样式问题

怎么写样式使得迟到和缺勤与对应进度条处于同一行且文字位于进度条左侧

//wxml
<view hidden="{{!checkinsuccess}}" class="record">
  <text>迟到</text>
  <progress activeColor="#ED1C24" backgroundColor="#09BB07" stroke-width="50rpx" border-radius="13rpx"></progress>
  <text>缺勤</text>
  <progress activeColor="#ED1C24" backgroundColor="#09BB07" stroke-width="50rpx" border-radius="13rpx"></progress>
  <text view:if="">干得漂亮!该课程从未迟到，继续保持哦</text>
  <text view:if="">已迟到一次，还有两次将影响考勤分，请注意！</text>
  <text view:if="">干得漂亮!该课程从未迟到，继续保持哦</text>
</view>

//wxss
progress {width: 600rpx; margin-left: 25rpx;}

flex布局或者progress float，最好是同一组text和progress放一个容器里面

wxss
.progress{overflow: hidden;margin-bottom:20rpx;}
.progress progress,.progress text{float:left}
progress {width: 600rpx;margin-left: 25rpx; }


wxml
<view hidden="{{!checkinsuccess}}" class="record">
<view class="progress">
  <text>迟到</text>
  <progress activeColor="#ED1C24" backgroundColor="#09BB07" stroke-width="50rpx" border-radius="13rpx"></progress>
</view>

<view class="progress">
  <text>缺勤</text>
  <progress activeColor="#ED1C24" backgroundColor="#09BB07" stroke-width="50rpx" border-radius="13rpx"></progress>
</view>
  <text view:if="">干得漂亮!该课程从未迟到，继续保持哦</text>
  <text view:if="">已迟到一次，还有两次将影响考勤分，请注意！</text>
  <text view:if="">干得漂亮!该课程从未迟到，继续保持哦</text>
</view>

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7669013
• 这篇博客也不错, 你可以看下微信小程序在开发过程中遇到的常见问题以及如何解决
• 除此之外, 这篇博客: 目前所遇到兼容性问题的解决方法中的 ，判断一个对象是否存在从而解决兼容性的问题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• if(typeof XMLHttpRequest != "undefined"){

  //.......

  }

• 您还可以看一下 郑逊敏老师的抖音快手短视频自媒体制作引流运营兼职创业赚钱盈利实战教程课程中的 抖音平台的推荐算法机制小节, 巩固相关知识点
  

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632