进度条未垂直对齐

Question

进度条中的 [First] 步骤与步骤 [二、三、四] 不一致。见下图：

步骤 2,3 和 4 的顶部之间有几个像素空间，我不知道如何解决？该代码在插入中完美运行，但在我的网页上它不起作用。也许有css重叠？我什至将 div 类更改为非常独特的东西，但并没有修复它。

我在进度条顶部放了一条红线来强调小空间错误。 总而言之，第一步的圆圈比其他圆圈高几个像素......我需要想办法解决这个问题。

我的代码如下：

.containerpb { 
    width: 100%;
    margin: 50px auto;
  }
.progressbar {
      counter-reset: step;
      border-top: 1px solid red;
  }
  .progressbar li {
      list-style-type: none;
      width: 25%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: counter(step);
      counter-increment: step;
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active:before {
      border-color: #55b776;
  }
  .progressbar li.active + li:after {
      background-color: #55b776;
  }

<div class="containerpb">
<ul class="progressbar">
    <li class="active">Complete Basic Information</li>
    <li>Add Secondary Owner(s)</li>
    <li>Review</li>
    <li>Export</li>
</ul>
</div>

Answer 1

明白了！谢谢大家的帮助。它是 li+li 内容的边距顶部 id。不得不将其从 .25em 更改为 0。谢谢！