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

查看:115
本文介绍了表格单元div之间的CSS行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图绘制一个基本的水平时间轴,并且我可以正确地分隔每个元素,但我坚持在它们之间画线。这是我的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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆