elementul用进度条组件，放在代码里如何调整上下位置呢，这旁边的为都会掉下来

Question

<template>
  <div>
    <div>
      <div class="box" v-for="(item, index) in numList" :key="index">
        <span class="text">{{ leftList[index] }}</span>
        <div class="schedule"><el-progress :percentage="50"  v-show="leftList[index]==0||leftList[index]==180" :show-text="false"></el-progress></div>
        <div class="machine">{{ "A" + item }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
      leftList: [
        215, 35, 143, 0, 112, 15, 312, 234, 180, 148, 95, 90, 80, 85, 94, 178,
      ],
    };
  },
  methods: {},
};
</script>

<style scoped>
.box {
  width: 6%;
  height: 100px;
  margin-right: 1px;
  border: 1px #ccc solid;
  display: inline-block;
  position: relative;
  background-color: #00b050;
  cursor: pointer;
}
.box:hover {
  background-color: #00b000;
}
.machine {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.text {
  font-size: 22px;
  font-weight: bold;
  margin-left: 5px;
  margin-top: 5px;
}
.schedule {

}
</style>

Answer 1

.box 添加 overflow: hidden;