求助：实现等级系统中左右等级+中间进度条的布局

开发个人资料模块的等级系统进度条，需要实现左侧显示当前等级、中间展示进度条、右侧显示下一等级的横向布局，当前实现未达到预期效果。

HTML #

<div class="card">
<div class="progress userProfileProgress myProfileProgress">
  <h6 class="current_rank">8</h6>
  <div class="determinate userProfileDeterminate" style="width: 0%; background-color: #00d871;"></div>
  <h6 class="next_rank">7</h6>
</div>
</div>

CSS #

.myProfileProgress {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "current_rank MyProfileProgress next_rank";
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 17px;
  margin-right: 17px;
}

.current_rank {
  grid-area: current_rank;
}

.MyProfileProgress {
  grid-area: MyProfileProgress;
}

.next_rank {
  grid-area: next_rank;
}

.card .myProfileProgress {
  background-color: var(--color-dark-variant);
  position: relative;
  top: 15px;
}

.card .userProfileProgress, .userProfileDeterminate {
  height: 7px;
  border-radius: 5px;
}

.progress {
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  background-color: #acece6;
  border-radius: 2px;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden;
}

1. 优化HTML结构 #

重构层级，让等级文字和进度条容器并列，结构更清晰：

<div class="card">
  <div class="level-progress-container">
    <h6 class="current_rank">8</h6>
    <div class="progress userProfileProgress">
      <div class="determinate userProfileDeterminate" style="width: 60%; background-color: #00d871;"></div>
    </div>
    <h6 class="next_rank">9</h6>
  </div>
</div>

2. 重写CSS布局 #

使用Flex实现横向对齐，同时调整样式细节：

/* 主容器：横向排列，居中对齐，分配空间 */
.level-progress-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 17px;
  padding: 8px 0;
}

/* 当前/下一等级：固定宽度，居中显示 */
.current_rank, .next_rank {
  margin: 0;
  width: 24px;
  text-align: center;
  font-size: 16px;
}

/* 进度条容器：占据中间剩余空间 */
.userProfileProgress {
  flex: 1;
  height: 7px;
  background-color: var(--color-dark-variant, #ddd);
  border-radius: 5px;
  overflow: hidden;
  margin: 0;
}

/* 进度条填充部分 */
.userProfileDeterminate {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}

.card {
  padding: 16px;
}

调整说明 #

• 用Flex替代Grid布局，适配这种简单的横向分配场景，代码更简洁易维护
• 修正下一等级数字逻辑（原代码中下一等级小于当前等级，不符合等级提升逻辑）
• 增加进度过渡动画，提升交互体验
• 明确元素间距与对齐规则，确保视觉效果匹配预期

内容的提问来源于stack exchange，提问作者Wampus