html - 这种错位的时间轴怎么布局，然后用css实现？

Question

如图

主要是左边的图标是错位的，本来想用ul、li实现的。
现在第一个和最后一个有问题，第一个倒很好解决，但是最后一个怎么实现图标下面没有线？
或者有没有更好的布局方式

Answer 1

The last one has no line and can be removed using jq’s last-child selector

Answer 2

You can write it directly using inline styles

Answer 3

That line is simulated using border, and the border of the last element is 0

Answer 4

Remove style last-child selector

Answer 5

is divided into two columns. The vertical line on the left is implemented with absolute positioning. The li tag is used on the right. The line segment can be border. If you use something like border-top:1px solid #aaa;, use li:first -child{border-top:none;}, if using border-bottom, use:last-child