我正在尝试绘制一个基本的水平时间轴,我可以使每个元素的间距正确,但我无法在它们之间画线。这是我的 html:
<ul class="timeline">
<li><div class="badge"><i class="fa fa-check"></i></div></li>
<li><div class="badge"><i class="fa fa-check"></i></div></li>
<li><div class="badge"><i class="fa fa-check"></i></div></li>
</ul>
还有我的 CSS:
.timeline {
display: table;
width: 100%;
}
.timeline > li {
display: table-cell;
text-align: center;
}
.timeline > li > .badge {
width: 50px;
height: 50px;
border-radius: 50% 50% 50% 50%;
text-align: center;
line-height: 50px;
display: inline-block;
color: #fff;
background-color: #999999;
}
这显示了三个等距的圆圈,中间有一个 Font Awesome 图标。现在我想在每个圆圈之间画线。我认为我可能需要使用 :after
和 :before
,但我尝试过的任何事情都没有给出任何结果。这是一种尝试:
.timeline > li > badge:after {
content: " ";
width: 100%;
height: 3px;
background-color: #999999;
}
最佳答案
将此添加到 .timeline > li
:
position: relative;
并添加这组新规则:
.timeline > li:not(:last-child):after
{
content: '';
display: block;
position: relative;
left: 50%;
top: -30px;
margin-left: 15%;
width: 70%;
height: 1px;
background-color: black;
}
关于html - 表格单元格 div 之间的 CSS 行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25460005/