本文介绍了表格单元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; }
小提琴:
这篇关于表格单元div之间的CSS行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!