排行榜布局实例

效果：

结构：

 

   < div  class ="list" >
     < div  class ="list_list" >
       < ul >
         < li >< span > 124412 </ span >< em > 1 </ em >< a  href ="" > 晕奇趣奇趣奇趣奇奇趣奇趣要菜 </ a ></ li >
         < li >< span > 124412 </ span >< em > 2 </ em >< a  href ="" > 晕奇趣要菜 </ a ></ li >
         < li >< span > 124412 </ span >< em > 3 </ em >< a  href ="" > 晕奇趣要菜 </ a ></ li >
         < li >< span > 124412 </ span >< em > 4 </ em >< a  href ="" > 晕奇奇趣趣奇趣奇趣趣要菜 </ a ></ li >
         < li >< span > 124412 </ span >< em > 5 </ em >< a  href ="" > 晕奇趣要菜 </ a ></ li >
         < li >< span > 124412 </ span >< em > 6 </ em >< a  href ="" > 晕奇趣要菜 </ a ></ li >
         < li >< span > 124412 </ span >< em > 7 </ em >< a  href ="" > 晕奇趣要菜 </ a ></ li >
         < li >< span > 124412 </ span >< em > 8 </ em >< a  href ="" > 晕奇趣要菜 </ a ></ li >
         < li >< span > 124412 </ span >< em > 9 </ em >< a  href ="" > 晕奇趣要菜 </ a ></ li >
       </ ul >
     </ div >
   </ div >

样式：

 

.list  {
    background-color :  #EAEAEA ;
    float :  left ;
    width :  250px ;
    border :  1px solid #CCCCCC ;
}
.list_list  {
    padding-top :  5px ;
    padding-right :  10px ;
    padding-bottom :  5px ;
    padding-left :  10px ;
}
.list .list_list li  {
    line-height :  14px ;
    padding-top :  5px ;
    padding-bottom :  5px ;
}
.list_list li span  {
    float :  right ;
    padding-left :  0px ;
}
.list_list li em  {
    padding-right :  10px ;
}
.list_list  li  a   {
    color :  #CC3300 ;
}

 

 

 

转载于:https://www.cnblogs.com/hidepeng/archive/2011/05/12/2044831.html