時間軸布局問題

1.時間軸我想縱向上下顯示文字該怎么布局,如圖:

<!--橫向時間軸-->

    <div class="container">
        <ul class="time-horizontal">
            <li><b></b>成立</li>
            <li><b></b>合作</li>
            <li><b></b>發(fā)展</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.功能邏輯是一個樣本文件檢驗所花費的時間在時間軸上直觀顯示,時間長在上面顯示長些,時間段就顯示短些....這個邏輯我該怎么實現(xiàn)?