表格单元div之间的CSS行 [英] CSS line between table-cell divs

问题描述

我试图绘制一个基本的水平时间轴，并且我可以正确地分隔每个元素，但我坚持在它们之间画线。这是我的HTML：

I am trying to draw a basic horizontal timeline, and I can get each element spaced correctly, but I'm stuck drawing lines between them. Here is my 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：

And my 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图标。现在我想在每个圆圈之间画线。我认为我可能需要在和之前使用：before ，但我没有试过任何结果在所有。这里有一个尝试：



This shows three equally spaced circles with a Font Awesome icon in the centre. Now I want to draw lines between each circle. I thought that I might need to use :after and :before, but nothing I've tried has given any result at all. Here is one attempt:

.timeline > li > badge:after {
    content: " ";
    width: 100%;
    height: 3px;
    background-color: #999999;
}

推荐答案

将此添加到 .timeline> li ：

position: relative;

并添加这组新规则：

And add this new set of rules:

.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/

这篇关于表格单元div之间的CSS行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！