时间轴布局问题

Question

1.时间轴我想纵向上下显示文字该怎么布局,如图:

<!--横向时间轴-->

    <div class="container">
        <ul class="time-horizontal">
            <li><b></b>成立</li>
            <li><b></b>合作</li>
            <li><b></b>发展</li>
            <li><b></b>共赢</li>
        </ul>
    </div>/*横向时间轴*/

div.container{

width: 95%;
height: 100px;
margin: 5% 0% 0% 2.5%;
/*border: 1px solid black;*/

}

.time-horizontal {

list-style-type: none;
border-top: 3px solid rgba(161,203,219,1);
max-width: 100%;
padding: 0px;
margin-top: 50px;

}

.time-horizontal li {

float: left;
position: relative;
text-align: center;
width: 24%;
padding-top: 10px;
/*border: 1px solid black;*/

}

.style:before {

content: '';
position: absolute;
top: -11px;
left: 47%;
width: 15px;
height: 15px;
border: 2px solid white;
border-radius: 10px;
background: rgb(161,203,219);
transition: 0.3s;

}

.colors:before{

background: #CC00CC;
box-shadow: 0 0 3em #CC00CC, 0 0 0.3em #CC00CC;
filter: blur(.1em);

}

2.功能逻辑是一个样本文件检验所花费的时间在时间轴上直观显示,时间长在上面显示长些,时间段就显示短些....这个逻辑我该怎么实现?

Answer 1

<div class="main">
    <div class="txt"></div>
    <div class="line"></div>
</div>

类名为txt的div代表你弄好的那一段，然后再加一个类名为line的div，定位在你画出的线段上方（z-index），给line设置背景颜色
然后根据进度改变line的宽度
大致思路就是这样