物流页面css,html

效果图

微信图片_20190219160039.png

css

.trans{

width: 100%;

}

.trans ul{

list-style: none;

padding: 0;

margin: 0;

}

.trans ul li{

display: inline-block;

float: left;

position: relative;

}

.left{

width: 35%;

text-align: center;

}

.right{

width: 65%;

box-sizing: border-box;

border-left: 1px solid #C4C4C4;

}

.time{

text-align: right;

}

.right img{

width: 25px;

height: 25px;

vertical-align: middle;

position: absolute;

left: -12.5px;

}

.status{

display: inline-block;

padding-left: 30px;

}

.transCon{

display: inline-block;

padding: 8px 0px 8px 30px;

}

html

<div class="trans">
            <ul>
                <li class="left">
                    <span class="date">2017.09.13</span>
                    <span class="time">13:04</span>
                </li>
                <li class="right">
                    <img src="img/gou.png">
                    <span class="status">已签收</span>
                    <span class="transCon">快件在【上海静安】被签收，签收人是本人</span>
                </li>
                <li class="left">
                    <span class="date">2017.09.13</span>
                    <span class="time">13:04</span>
                </li>
                <li class="right">
                    <img src="img/gou.png">
                    <span class="status">已签收</span>
                    <span class="transCon">快件在【上海静安】被签收，签收人是本人</span>
                </li>
                <li class="left">
                    <span class="date">2017.09.13</span>
                    <span class="time">13:04</span>
                </li>
                <li class="right">
                    <img src="img/gou.png">
                    <span class="status">已签收</span>
                    <span class="transCon">快件在【上海静安】被签收，签收人是本人</span>
                </li>
            </ul>
        </div>