橫向、縱向時間軸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-left: -6px;
top: 7px;
background: #D7BB67;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background-size: 10px 10px;
}

.timeline li h4:after {
content: '';
display: block;
position: absolute;
width: 2px;
height: 100%;
background: #D7BB67;
left: 0;
top: 0.6rem;
margin-left: -2px;
}
--------------------
橫向

.timeline li .time:before {
content: '';
display: block;
position: absolute;
width: 10px;
height: 10px;
bottom: 0;
margin-bottom: -4px;
left: 50%;
margin-left: -5px;
background: #D7BB67;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background-size: 10px 10px;
}

.timeline li .time:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 2px;
background: #D7BB67;
left: 0;
bottom: 0;
margin-left: -2px;

-----------------
當ul li添加display:inline-block的時候，會產生間距。
這個時候需要給li的父元素設置font-size:0 。li元素里面的字體在單獨重置字體大小即可。

淺談inline-block及解決空白間距鏈接地址： http://www.jb51.net/css/76707.html

感謝小志，evan，lost等大神的助力得以完善

 

橫向下載：http://files.cnblogs.com/files/leshao/%E6%A8%AA%E5%90%91timeline%E6%97%B6%E9%97%B4%E8%BD%B4.rar

 

縱向左右：http://files.cnblogs.com/files/leshao/%E7%BA%B5%E5%90%91timeline%E5%B7%A6%E5%8F%B3%E5%86%85%E5%AE%B9.rar

 

縱向右邊：http://files.cnblogs.com/files/leshao/%E7%BA%B5%E5%90%91timeline%E5%8F%B3%E8%BE%B9%E5%86%85%E5%AE%B9.rar