html - 进度条未垂直对齐
问题描述
进度条中的 [First] 步骤未与步骤 [Two, Three, and Four] 对齐。见下图:
步骤 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>
解决方案
知道了!感谢大家的帮助。它是 li+li 内容的 margin-top id。必须将其从 .25em 更改为 0。谢谢!
推荐阅读
- c++ - Cmake 错误:在 Windows 10 上配置或构建 openpose 时未找到变量
- excel - 下载公开的 Google 电子表格
- excel - 同一操作的 VBA 多个 Target.Address (OR)
- android - DownloadManager 在 Android 11 模拟器上抛出 IllegalStateException 或 SecurityException
- java - 如何在spring boot中将参数值传递给查询?
- php - Laravel 路线中未识别路线
- matplotlib - Matplotlib:具有相同布局的多个图(无自动布局)
- android - 未解决的参考 MergeAdapter
- sql - 父子层次结构的根父级
- css - 在百分比宽度容器之外展开图像