app下导航，图标截取某些部分定位

<ul class="ui-tiled  ui-row">
    <li data-href=" #" class=" ui-col-20  "> 
      <div class="spanicon"  style="background-position: 0px -0px;"></div>
      <div class="title">首页</div>
    </li>
    <li data-href="#" class=" ui-col-20 " >
    <div class="spanicon" style="background-position: 0px -32px;"></div>
      <div  class="title">主页</div>
    </li>
    <li data-href="#" class=" ui-col-20">
     <div class="spanicon"  style="background-position: 0px -64px;"></div>
      <div  class="title">搜索</div>
    </li>
    <li data-href="#" class=" ui-col-20 " >
      <div class="spanicon"  style="background-position: 0px -96px;"></div>
      <div  class="title">厂商</div>
    </li>
    <li data-href="#" class=" ui-col-20 ">
       <div class="spanicon"  style="background-position: 0px -128px;"></div>
      <div  class="title">客户</div>
    </li>

  </ul>

<style>

.spanicon {
width: 32px;
height: 32px;
background: url(../img/vip/icon_qqlevel_sprite.png) no-repeat;
margin-top: 2px;
}
.title {
vertical-align: middle;
text-align: center;
font-size: 10px;  
}

.ui-tiled {
  display: -webkit-box;
  width: 100%;
  -webkit-box-sizing: border-box; }

.ui-tiled li {
  -webkit-box-flex: 1;
  width: 100%;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center; }

.ui-row {
  display: block;
  overflow: hidden; }

.ui-col-20 {
  width: 20%; }

</style>