横向、纵向时间轴timeline系列

近期移动端项目用到了很多时间轴。纵向的。开始可以实现，但是不利于维护。 整理下， 以作为备份留存学习参考。子元素的 标签的 ：before实现圆点，:after实现边线border 纵向时间轴,单一右边内容:padding-left即可实现;如果时间轴边线左右都有内容,则左边的内容,定位过去即可. 横向的时间轴使用了display:inline-block

-----------------------------

------------------

----------------------- 关键代码片段：

---------------------- 纵向 .timeline li h4:before { content: ; display: block; position: absolute; width: 10px; height: 10px; left: 0; margin-

近期移动端项目用到了很多时间轴。纵向的。开始可以实现，但是不利于维护。 整理下， 以作为备份留存学习参考。子元素的 标签的 ：before实现圆点，:after实现边线border 纵向时间轴,单一右边内容:padding-left即可实现;如果时间轴边线左右都有内容,则左边的内容,定位过去即可. 横向的时间轴使用了display:inline-block ----------------------------- ------------------ ----------------------- 关键代码片段： ---------------------- 纵向 .timeline li h4:before { content: ; display: block; position: absolute; width: 10px; height: 10px; left: 0; margin-