基于HTML/CSS/JS实现按百分比控制的货运进度条

嘿，我懂你作为新手修改这段进度条代码时遇到的布局崩溃窘境了——原代码用了table-cell来均分三个节点的位置，直接改很容易打破原有布局。我来给你一套完整的调整方案，既能实现按百分比移动Place B的需求，又能保证布局稳定：

修改后的完整代码 #

CSS 部分

/* 重构进度条容器，改为相对定位作为节点的父容器 */
.progress {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  color: #849397;
  height: 4em; /* 固定高度适配节点和进度线 */
}

/* 所有节点改为绝对定位，方便自由调整位置 */
.progress > li {
  position: absolute;
  top: 0;
  text-align: center;
  font-size: 0.8em;
  width: 3em;
  margin-left: -1.5em; /* 偏移一半宽度，让节点中心对齐百分比位置 */
}

/* 节点的圆形样式保持不变 */
.progress > li:before {
  content: '';
  display: block;
  margin: 0 auto;
  background: #dfe3e4;
  width: 3em;
  height: 3em;
  line-height: 3em;
  border-radius: 100%;
  position: relative;
  z-index: 1000;
  margin-bottom: 0.25em;
}

/* 全局进度背景线 */
.progress:before {
  content: '';
  position: absolute;
  top: 1.25em;
  left: 0;
  width: 100%;
  height: 0.5em;
  background: #dfe3e4;
  z-index: -1;
}

/* 已完成的进度线 */
.progress .completed-line {
  position: absolute;
  top: 1.25em;
  left: 0;
  height: 0.5em;
  background: blue;
  z-index: -1;
}

/* 状态样式保持原有逻辑 */
.progress > li.is-complete {
  color: #2ecc71;
}
.progress > li.is-complete:before {
  background: blue;
}
.progress > li.is-active {
  color: blue;
}
.progress > li.is-active:before {
  background: green;
}

/* 通用盒模型设置 */
*, *:after, *:before {
  box-sizing: border-box;
}

HTML 部分

<ol class="progress">
  <!-- Place A 固定在左侧（0%位置） -->
  <li class="is-complete" data-step="1" style="left: 0%"> Place A </li>
  <!-- Place B 这里设置为70%位置，你可以动态修改这个值 -->
  <li class="is-active" data-step="2" style="left: 70%"> Place B </li>
  <!-- Place C 固定在右侧（100%位置） -->
  <li data-step="3" style="left: 100%"> Place C </li>
  <!-- 已完成进度线，宽度和Place B的位置保持一致 -->
  <div class="completed-line" style="width: 70%"></div>
</ol>

关键改动说明 #

• 把原来的table/table-cell布局改成了相对定位容器+绝对定位节点，这样每个节点的位置可以通过left属性自由控制，不会再被均分布局限制
• 给每个节点加了margin-left: -1.5em，让节点的中心刚好对齐设置的百分比位置（比如left:70%时，节点中心在进度条70%宽度处）
• 用单独的.completed-line元素来展示已完成的进度，它的宽度和Place B的left值保持一致，保证进度线和节点位置同步
• 保留了你原来的节点状态样式（已完成/活跃），不用改动原有逻辑

动态调整的小技巧 #

如果你需要用JavaScript根据实际货运数据动态更新百分比，只需要获取Place B元素和.completed-line元素，修改它们的style.left和style.width就行，比如：

// 假设这是从接口拿到的已完成百分比
const completionPercent = 70;

const placeB = document.querySelector('.progress .is-active');
const completedLine = document.querySelector('.completed-line');

placeB.style.left = `${completionPercent}%`;
completedLine.style.width = `${completionPercent}%`;

这样修改后，不管你设置多少百分比，布局都不会崩，节点位置和进度线也能完美对应啦！

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