CSS- 横向和纵向时间轴

/*横向时间轴*/
        .time-horizontal {
            list-style-type: none;
            border-top: 1px solid #707070;
            max-width: 800px;
            padding: 0px;
            margin: 0px;
        }

        .text-horizontal {
            list-style-type: none;
            max-width: 800px;
            padding: 0px;
            margin: 0px;
        }

            .text-horizontal li {
                float: left;
                position: relative;
                text-align: center;
                width: 33.33%;
            }


        .time-horizontal li {
            float: left;
            position: relative;
            text-align: center;
            width: 33.33%;
            padding-top: 10px;
        }

        .nomal b:before {
            content: ;
            position: absolute;
            top: -10px;
            left: 47%;
            width: 12px;
            height: 12px;
            border: 2px solid #4c4c4c;
            border-radius: 8px;
            background: #4c4c4c;
        }

        .ok b:before {
            content: ;
            position: absolute;
            top: -10px;
            left: 47%;
            width: 12px;
            height: 12px;
            border: 2px solid #0074E8;
            border-radius: 8px;
            background: #0074E8;
        }


<div id="jd" style="width:90%;margin:10px auto;" class="content">
        <div style="width:150px;">活动进度</div>
        <div style="height:10px;"></div>
        <div class="container">
            <ul class="text-horizontal" id="jdtime">
                <li><b></b>报名中</li>
                <li><b></b>进行中</li>
                <li><b></b>结束</li>
            </ul>
            <div style="height:0px; clear:both;"></div>
        </div>
        <div class="container">
            <div style="height:20px;"></div>
            <ul class="time-horizontal" id="jdzt">
                <li class="nomal"><b></b>报名中</li>
                <li class="nomal"><b></b>进行中</li>
                <li class="ok"><b></b>结束</li>
            </ul>
            <div style="height:10px; clear:both;"></div>
        </div>
    </div>

下面的是横向和纵向