html - 這種錯位的時間軸怎么布局，然后用css實現？

問題描述

如圖

主要是左邊的圖標是錯位的，本來想用ul、li實現的。現在第一個和最后一個有問題，第一個倒很好解決，但是最后一個怎么實現圖標下面沒有線？或者有沒有更好的布局方式

問題解答

最后一個沒有線，可以用jq的last-child 選擇器去掉

可以直接用內聯樣式寫死吧

那條線使用border來模擬，最后一個元素的border為0

樣式 last-child 選擇器去掉

分為左右兩欄，左邊那條豎線，用絕對定位實現，右邊用li標簽，線段使用border即可，如果使用類似border-top:1px solid #aaa;的話，則用li:first-child{border-top:none;},如果使用border-bottom則使用:last-child