關於橫向時間軸，其實網上有很多種方案，但是在有需求定制的情況下，還是自己寫比較方便的。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix:after {
content: '\20';
display: block;
height: 0;
clear: both;
}
.time-horizontal {
margin: 40px 0 40px 85px;
width: 800px;
}
.time-horizontal li {
list-style-type: none;
float: left;
position: relative;
width: 370px;
padding-top: 20px;
font-size: 14px;
border-top: 1px dashed #ccc;
}
.time-horizontal li:last-child {
width: 60px;
border-top: 1px dashed transparent !important;
}
.time-horizontal li:first-child>div,
.time-horizontal li:nth-child(2)>div {
margin-left: -3px;
}
.time-horizontal li:last-child>div {
margin-left: -10px;
}
.time-horizontal li>b:before {
content: '';
position: absolute;
top: -18px;
left: 0;
width: 30px;
height: 30px;
border: 2px solid #f2f2f2;
border-radius: 50%;
background: #f2f2f2;
color: #fff;
font-size: 19px;
text-align: center;
}
.time-horizontal li.solid {
border-top: 1px solid #ccc;
}
.time-horizontal li.pass>b:before {
content: '✔';
border: 2px solid #008118;
background: #008118;
}
.time-horizontal li.no-pass>b:before {
content: '×';
border: 2px solid #fa0000;
background: #fa0000;
}
</style>
</head>
<body>
<ul class="time-horizontal clearfix">
<li class="pass solid">
<b></b>
<div>待開票</div>
</li>
<li class="pass">
<b></b>
<div>開票中</div>
</li>
<li>
<b></b>
<div>開票完成</div>
</li>
</ul>
</body>
</html>
效果（點擊圖片可放大）：
這里值得注意的就是未完成的進度線需要用虛線顯示
如有錯誤，請多指教，謝謝！