HTML进度条开发求助：灰色背景不显示，需替换自定义可控样式

问题根源 #

你之前的灰色背景显示异常，是因为w3.css的.w3-light-grey自带样式和行内样式冲突，依赖外部样式表也会导致样式不可控。直接弃用w3.css，改用自定义CSS就能彻底解决。

修改后的完整代码 #

<html>
<title>进度条示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 重置默认边距，避免浏览器样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主容器样式 */
.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}

/* 进度条容器：灰色背景、圆角、内边距 */
.progress-bar-container {
  background-color: #e0e0e0;
  border-radius: 25px;
  padding: 4px;
  overflow: hidden;
  margin: 15px 0;
}

/* 进度分段：橙色背景、圆角、间距 */
.progress-segment {
  height: 24px;
  width: 15%;
  background-color: #ff9800;
  border-radius: 25px;
  margin-right: 5px;
}

/* 状态文字容器，用flex实现左右对齐 */
.status-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-text p {
  font-size: 16px;
}
</style>

<body>
  <div class="container">
    <h2>Progress Bar</h2>
    <div class="progress-bar-container">
      <div class="progress-segment"></div>
      <div class="progress-segment"></div>
    </div>
    <div class="status-text">
      <p>Good!</p>
      <p>Step 2 of 7</p>
    </div>
  </div>
</body>
</html>

关键修改说明 #

• 彻底移除w3.css引入，所有样式自定义，杜绝样式冲突
• 用flex布局替代原代码的float，解决容器高度塌陷问题，布局更稳定
• 给进度条容器添加内边距，让橙色分段和灰色背景间有间隙，更贴近目标设计
• 所有颜色、尺寸都可直接在CSS中调整，完全自主可控

内容的提问来源于stack exchange，提问作者Jose Eduardo Perez