带虚线与圆点的面包屑菜单布局实现问题求助

问题分析 #

当前实现存在两个核心问题：

1. 仅第一个步骤有下方圆点，其余步骤缺失；
2. 虚线长度固定，无法精准连接相邻步骤的中心圆点。

解决方案 #

1. 修正HTML结构 #

确保<ul>子元素仅为<li>，为每个步骤添加对应圆点元素：

<div class="breadcrumb-menu">
  <ul class="breadcrumb-steps">
    <li class="step active">
      StepOne
      <span class="dot dot-active"></span>
    </li>
    <li class="step">
      StepTwo
      <span class="dot"></span>
    </li>
    <li class="step">
      AnotherStep
      <span class="dot"></span>
    </li>
    <li class="step">
      Someotherstep
      <span class="dot"></span>
    </li>
  </ul>
</div>

2. 调整CSS样式 #

通过flex布局平分步骤宽度，实现圆点居中、虚线精准连接：

.dot {
  position: absolute;
  height: 5px;
  width: 5px;
  background-color: #bbb;
  border-radius: 50%;
  top: calc(100% + 8px); /* 与上方文本保持间距 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中对齐步骤 */
}

.dot-active {
  background-color: #fff;
}

.breadcrumb-menu {
  padding: 10px 20px;
  background-color: #1E1E1E;
  width: 488px;
}

.breadcrumb-steps {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.breadcrumb-steps .step {
  color: #6c757d;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 15px;
  position: relative;
  cursor: pointer;
  text-align: center;
  flex: 1; /* 每个步骤平分容器宽度 */
}

/* 仅给非最后一个步骤添加虚线 */
.breadcrumb-steps .step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(100% + 8px + 2px); /* 与圆点垂直居中对齐 */
  left: 50%;
  width: 100%; /* 长度等于相邻步骤中心间距 */
  height: 1px;
  background: repeating-linear-gradient(to right, #6c757d, #6c757d 2px, transparent 4px, transparent 6px);
}

.breadcrumb-steps .step.active {
  color: #fff;
}

.breadcrumb-steps .step:hover {
  color: #ffffff;
}

关键调整说明 #

• flex:1：让每个步骤平分容器宽度，确保圆点和虚线的对齐基准一致；
• transform: translateX(-50%)：让圆点精准居中在对应步骤的正下方；
• :not(:last-child)::after：避免最后一个步骤右侧出现多余虚线；
• width:100%：虚线长度自动匹配相邻两个步骤中心的距离，实现精准连接。

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