leoyi520

移动端新闻列表样式2

.clear{
overflow: hidden;
*zoom:1;
z-index: 100;
}

.white{
color:#fff;
}

.fl{
float: left;
}
.fr{
float: right;
}

/*新闻列表*/
.newsTitle{
width: 100%;
height: 30px;
line-height: 30px;
border-bottom: 1px dashed #ccc;
}
.newsTitle h4{
width: 100px;
line-height: 30px;
margin-left: 10px;
color:#333;
}
.newsBox ul li{
width: 100%;
height: 25px;
line-height: 25px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
.newsDashed{
display: inline-block;
width: 10px;
height: 16px;
background: url("../images/i_35.jpg")no-repeat;
margin:0 4px;
}
.newsBox{
font-size: 12px;
padding-bottom: 80px;
}
.newsBox ul li{
height: 30px;
line-height: 30px;
}
.newsBox ul li a{
color:#383838;
}
.ico-more{
display: inline-block;
width: 7px;
height: 15px;
background: url("../images/i_32.jpg")no-repeat;
margin-right: 3px;
margin-top: 5px;
}
.rightMore{
margin-right: 3px;
color:#ccc;
}

<!-- 新闻动态 -->
<div class="newsBox clear white">
<div class="newsTitle clear">
<div class="fl">
<h4>新闻动态</h4>
</div>
<a href="#" class="ico-more fr"></a>
</div>
<ul>
<li><span class="newsDashed"></span><a href="#">为了提升快餐店的“逼格”这些快餐店的老板拼了 </a> <span class="rightMore fr">></span></li>
<li><span class="newsDashed"></span><a href="#">便利店正在成为快餐行业的威胁你知道吗？ <span class="rightMore fr">></span></a></li>
</ul>
</div>