时间刻度线css,纯CSS时间轴列表

一.场景

需要实现时间轴列表，左边一串小圆点，右边是列表内容，需要小圆点位置与列表项对应，最终效果如下：

timeline

二.实现方案

有几个细节：

小圆点要与列表项对齐

首项、末项的时间线不能超出小圆点

列表项之间要有间隔

前两条是对自适应的要求，最后一条是对布局的限制

传统方案是通过列表容器生成一条足够长的竖线，然后列表项自带小圆点，再把小圆点对齐到竖线上。竖线的长度没有办法精确控制(不通过js计算的话)，无法满足第二条，那么可以换个方式，让列表项自带同高度的竖线，拼接成完整的时间线

P.S.不用担心拼接出来的竖线会被看出来，一定是完美无缝的，否则浏览器不科学(两个相邻的块级元素之间不能有无法解释的缝隙吧，那么它们的border-left一定能够完美连接起来)

三.具体实现

首先确定结构，因为列表项间隔的限制，列表项需要多套一层：

.listItem>.listItemContent>.listItemContent-date+.listItemContent-content

因为用margin实现间隔的话竖线长度不对，接不起来，所以多套一层listItem，把margin换成padding。由listItem携带