Question

我正在尝试绘制一个基本的水平时间轴，我可以正确地间隔每个元素，但我在它们之间画线。这是我的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;
}

Answer 1

将其添加到.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;
}

小提琴：http://jsfiddle.net/jacquesc/Lzvxyfv9/

Answer 2

怎么样，将border-right属性添加到li

li{ border-right: 1px solid #999999; }

DEMO

Answer 3

在css中你可以这样做：

.timeline > li{
    border-right: 1px solid #222222;
}

Answer 4

添加border-right，它应该这样做

.timeline > li {
    display: table-cell;
    text-align: center;
    border-right:1px solid #000;
}

表格单元格之间的CSS线

4 个答案: