小程序进度条样式问题

Question

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

//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;}

Answer 1

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>