今天完成的事

1.网上查询资料 调整思路 给每个列表的文字部分单独设置一个层级

然后设置为块级元素

2.调整列表文字行部分css代码

.pp {
    display: block;               /*设置display属性为inline-flex排列*/
    align-items: center;                /*行列项目中垂直居中排列*/
    padding-left: 26px;                 /*设定左内边距为25px*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

3.发现调整过后25元/小时之后的>图标无法显示

调整图标的display属性为inline-block

.icon3 {
    background-position: -360px -24px;  /*设定选图坐标*/
    display: block;
}

4.修改之后发现没有居中对齐

5.重新排列文字部分的结构 将>图标插入文字“25元/小时”做背景图标

<p1 class="p1">
    <span1 class="icon1"></span1>
    <pp class="pp">
            <p2 class="t text">
                2015-7-5至2015-7-12
            </p2>
            <p2 class="t2 text">
                25元/小时
            </p2>
    </pp>
    <span1 class="icon2"></span1>
</p1>

.t2 {
    font-size: 16px;                    /*设定文字大小为16px*/
    color: red;                         /*设置文字大小为红色*/
    background-image: url(矢量智能对象.png);
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 30px;

6.一直在思考怎么解决inline-block下两端对齐以及省略号的问题

明计划的事

1.完善页面布局 完成两端对齐以及省略号的效果 

2.在完成1的情况下开始任务7

遇到的问题 

1.雪碧图display的属性为默认值inline时不显示 为blocks时会换行 为inline-block时才会并列显示

2.display用block时不能轻松垂直居中对齐 用inline-block时不能文字缩放使用省略号

3.设置好样式了省略号时灵时不灵

收获

两天不写 感觉都迟钝了