我想弄清楚为什么进度条的第一步与其他步骤略微对齐。它只有几个像素,但我不明白为什么它没有正确对齐。你会看到里面的 #1 垂直居中的圆圈比其他圆圈高......我似乎无法解决这个问题,因为它只发生在我这边!
CSS/HTML
.progressbar {
counter-reset: step;
}
.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;
}
<ul class="progressbar">
<li class="active">Complete Basic Information</li>
<li>Add Secondary Owner(s)</li>
<li>Review</li>
<li>Export</li>
</ul>