不多说，直接上实例。

*************************

列表一：

<div class="tempbox"> 
  <ul id="pwslist"> 
      <li><span class="more">span>刘强东被迫卖地促销为D轮融资li> 
      <li><span class="more">span>传京东商城出售自建仓库地块li> 
      <li><span class="more">span>传亚马逊即将推出10英寸版Kli> 
      <li><span class="more">span>网购一个差评引发血案 健全li> 
      <li><span class="more">span>夏日疯狂网购 傲游浏览器3为li> 
 
      <li><span class="time">2012.12.22span>电商业人才饥渴：工作1年最高li> 
      <li><span class="time">2012.12.22span>一嗨租车携手京东商城 推租车li> 
      <li><span class="time">2012.12.22span>金山网络:律师称金山网购保li> 
      <li><span class="time">2012.12.22span>小狗携京东商城强力出击：定制li> 
      <li><span class="time">2012.12.22span>网购：不×××成潜规则 税收漏li> 
  ul> 
div> 

#pwslist li{ 
  height: 40px; line-height: 40px; 
  border-bottom: 1px solid #eee; 
  text-indent: 10px; 
  background: #f2f3f5; 
  background-p_w_picpath:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#f2f3f5), to(#e1e7ea)); 
   
} 
#pwslist li:hover{ 
 background: #d6f0ff; 
} 
#pwslist li span.more{ 
  width: 30px; 
 height: 40px; 
  display: block; 
  float: right; 
  background: url(1.png) no-repeat center; 
} 
#pwslist li span.time{ 
  height: 40px; 
  padding-right: 10px; 
 display: block; 
  float: right; 
  font-size: 12px; 
 color: #ccc; 
} 

列表二

<div class="tempbox"> 
  <ul class="aboutlist"> 
      <li><span class="more">span>关于我们li> 
      <li><span class="more">span>更多应用li> 
  ul> 
  <ul class="aboutlist"> 
      <li>意见反馈li> 
      <li>清除缓存li> 
      <li><span class="more">span>流畅模式li> 
      <li><span class="more">span>喜欢？评个5分吧li> 
  ul> 
  <ul class="aboutlist"> 
      <li class="radius5"><span class="more">span>注销登陆li> 
  ul> 
div> 

.aboutlist{padding: 10px;} 
.aboutlist li{ 
  height: 40px; line-height: 40px; 
  border-bottom: 1px solid #eee; 
  text-indent: 10px; 
  background: #f2f3f5; 
  background-p_w_picpath:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#f2f3f5), to(#e1e7ea)); 
   
} 
.aboutlist li:first-child{ 
  border-radius:5px 5px 0px 0px; 
} 
.aboutlist li:last-child{ 
 border-radius:0px 0px 5px 5px; 
} 
 
.aboutlist li:hover{ 
 background: #d6f0ff; 
} 
.aboutlist li span.more{ 
  width: 30px; 
 height: 40px; 
  display: block; 
  float: right; 
  background: url(1.png) no-repeat center; 
} 
.aboutlist li.radius5{ 
  border-radius:5px; 
} 

列表三

<div class="tempbox"> 
  <ul class="listico"> 
      <li><span class="ico ico1">span><span class="more">span>关于我们li> 
      <li><span class="ico ico2">span><span class="more">span>更多应用li> 
  ul> 
  <ul class="listico"> 
      <li><span class="ico ico1">span><span class="more">span>意见反馈li> 
      <li><span class="ico ico1">span><span class="more">span>清除缓存li> 
      <li><span class="ico ico1">span><span class="more">span>流畅模式li> 
      <li><span class="ico ico1">span><span class="more">span>喜欢？评个5分吧li> 
  ul> 
  <ul class="listico"> 
      <li class="radius5"><span class="ico ico3">span><span class="more">span>注销登陆li> 
  ul> 
div> 

.listico{padding: 10px;} 
.listico li{ 
  height: 40px; line-height: 40px; 
  border-bottom: 1px solid #eee; 
  background: #f2f3f5; 
  background-p_w_picpath:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#f2f3f5), to(#e1e7ea)); 
   
} 
.listico li:first-child{ 
 border-radius:5px 5px 0px 0px; 
} 
.listico li:last-child{ 
 border-radius:0px 0px 5px 5px; 
} 
 
.listico li:hover{ 
 background: #d6f0ff; 
} 
.listico li span.more{ 
  width: 30px; 
 height: 40px; 
  display: block; 
  float: right; 
  background: url(1.png) no-repeat center; 
} 
.listico li span.ico{ 
 width: 14px; 
 height: 20px; 
  margin: 10px; 
  display: block; 
  float: left; 
 background-size: 14px; 
} 
.listico li span.ico1{background: url(brainstorming.png) no-repeat center;} 
.listico li span.ico2{background: url(brand.png) no-repeat center;} 
.listico li span.ico3{background: url(comment.png) no-repeat center;} 
 
 
.listico li.radius5{ 
  border-radius:5px; 
} 

***************************************

DEMO

×××：

***************************************