时间轴

1

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .about4 {
            width: 648px;
            margin: 40px auto 0 auto;
        }

        .about4_ch {
            font-size: 18px;
            color: #d80017;
            margin-bottom: 30px;
        }

        .about4_main {
            position: relative;
            padding-left: 20px;
            overflow: hidden;
        }

        .line {
            width: 1px;
            height: 100%;
            background-color: #999;
            position: absolute;
            left: 26px;
            z-index: -1;
        }

        .about4_main ul li {
            padding-left: 25px;
            font-size: 14px;
            color: #333333;
            line-height: 30px;
            margin-bottom: 30px;
            background: url(images/about4_icon.png) left center no-repeat;
        }

            .about4_main ul li:last-child {
                margin-bottom: 0px;
            }
    </style>

　　2；js 动态添加li时放到后边

  h = $(".about4_main ul li:first-child").height() / 2;//<!--第一个li高度的一半-->
            var h1 = $(".about4_main ul li:last-child").height() / 2;//<!--最后一个li高度的一半-->
            $(".line").css("top", h);
            $(".line").height($(".about4_main").height() - h1 - h);

　3

<div class="about4">
        <div class="about4_ch">成长经历</div>
        <div class="about4_main">
            <div class="line"></div>
            <ul>
                <li>2011年走进大学的校园
                </li>
                <li>2011-2013在学校获得了各种奖项
                </li>
                <li>2014年我对大学的想法有了本质的转变
                </li>
                <li>2015年我毕业了，开始在互联网的浪潮中艰难生存
                </li>
                <li>无论li内容多少，直线都不会超出，并且红点永远居中的
                </li>
            </ul>
        </div>
    </div>