如何正确在li元素间绘制连接线？步进器组件问题排查

问题分析 #

当前代码存在两个核心问题：

• 示例中线条与li元素无法正确连接：父ul使用flex布局，但子li额外添加了float: left导致布局冲突；同时线条的定位与宽度计算错误，无法衔接相邻步骤
• 实际项目中线条完全不显示：容器wizard-v4-container设置了z-index: -1，导致线条被其他元素遮挡；布局冲突也会导致线条无法正常渲染

修复方案 #

1. 移除冲突布局属性：删除li元素的float: left，依赖父ul的flex布局实现水平排列
2. 修正线条定位与宽度：调整li:after的定位逻辑，让线条从当前步骤右侧延伸到下一个步骤左侧
3. 修复层级遮挡问题：移除wizard-v4-container的z-index: -1，确保线条正常显示
4. 优化已完成步骤的线条样式：让已完成步骤之间的线条显示为绿色，符合视觉逻辑

修改后的完整代码 #

CSS代码

body {
  margin: 0;
}

.page-content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.wizard-v4-content {
  background: #fff;
  width: 80%;
  margin: 40px 20px;
  font-family: 'Roboto', sans-serif;
  position: relative;
  display: flex;
}

.wizard-v4-content .wizard-v4-form {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
}

.wizard-v4-form .wizard-v4-header {
  text-align: left;
  padding: 10px 0 5px;
}

.wizard-v4-form .wizard-v4-header .heading {
  margin: 0;
  padding: 20px 0 20px;
}

.wizard-v4-form .wizard-v4-header p {
  margin: 0;
}

.wizard-v4-container {
  width: 100%;
  /* 移除z-index避免线条被遮挡 */
}

.wizard-v4-progressbar {
  width: 90%;
  padding: 0;
  margin: 0 auto;
  display: flex;
}

.wizard-v4-progressbar li {
  list-style-type: none;
  flex: 1;
  font-size: 12px;
  position: relative;
  text-align: center;
  color: darkgray;
}

.wizard-v4-progressbar li:after {
  width: 100%;
  height: 2px;
  content: "";
  position: absolute;
  background-color: darkgray;
  top: 11px;
  left: 50%;
  display: block;
  z-index: 1;
}

.wizard-v4-progressbar li:before {
  width: 24px;
  height: 24px;
  content: "";
  line-height: 30px;
  border: 2px solid darkgray;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
  z-index: 2;
}

.wizard-v4-progressbar li:first-child:after {
  content: none;
}

.wizard-v4-progressbar li.wizard-v4-active {
  font-size: 90%;
  font-weight: bold;
  color: black;
}

.wizard-v4-progressbar li.wizard-v4-active:before {
  width: 28px;
  height: 28px;
  color: green;
  border-color: green;
  background-color: green;
  margin-top: -2px;
}

.wizard-v4-progressbar li.wizard-v4-checked {
  color: black;
}

.wizard-v4-progressbar li.wizard-v4-checked::before {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f058";
  color: green;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

/* 已完成/当前步骤的线条改为绿色 */
.wizard-v4-progressbar li.wizard-v4-checked:after,
.wizard-v4-progressbar li.wizard-v4-active:after {
  background-color: green;
}

/* 最后一个步骤不需要右侧线条 */
.wizard-v4-progressbar li:last-child:after {
  content: none;
}

/* Responsive */
@media screen and (max-width: 1200px) {}

@media screen and (max-width: 992px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 576px) {}

HTML代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="page-content">
  <div class="wizard-v4-content">
    <div class="wizard-v4-form">
      <div class="row justify-content-center">
        <div class="col-12">
          <div class="wizard-v4-container">
            <ul class="wizard-v4-progressbar">
              <li class="wizard-v4-checked">Step 1</li>
              <li class="wizard-v4-active">Step 2</li>
              <li>Step 3</li>
              <li>Step 4</li>
              <li>Step 5</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• 给li添加flex:1，让所有步骤均匀分布在ul容器中
• 将li:after的left改为50%、宽度设为100%，让线条从当前步骤中点延伸到下一个步骤中点，实现完美衔接
• 移除float: left和容器的z-index: -1，解决布局冲突和遮挡问题
• 新增已完成/当前步骤的线条绿色样式，优化视觉反馈

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