CSS自适应宽度圆角按钮

CSS自适应宽度圆角按钮，背景图要使用满足最长按钮的宽度，然后通过两个标签a, span，一个通过背景图的左对齐，一个通过背景图的右对齐。

 

 
   <! 
   DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
   > 
   
 
   < 
   html  
   xmlns 
   ="http://www.w3.org/1999/xhtml" 
   > 
   
 
   < 
   head 
   > 
   
 
   < 
   meta  
   http-equiv 
   ="Content-Type" 
    content 
   ="text/html; charset=gb2312" 
     
   /> 
   
 
   < 
   title 
   >CSS自适应宽度圆角按钮 @5key.net 
   </ 
   title 
   > 
   
 
   < 
   style 
   > 
   
 *{ 
   margin: 
   0; 
    padding: 
   0;} 
   
 body{ 
   padding: 
   10px; 
    font-size: 
   12px;} 
   
 h1{ 
   margin: 
   0; 
    padding: 
   10px 0; 
    font-size: 
   14px; 
    font-weight: 
   bold;} 
   
 a{ 
   background: 
   url(http://www.lanrentuku.com/down/js/images/12447749840.gif) left 0; 
     color: 
   #fff; 
    text-decoration: 
   none; 
    height: 
   30px; 
    float: 
   left; 
    cursor: 
   hand; 
    margin: 
   0 5px 0 0;} 
   
 a:hover{ 
   background: 
   url(http://www.lanrentuku.com/down/js/images/12447749840.gif) left -30px; 
   height: 
   30px;} 
   
 a span{ 
   background: 
   url(http://www.lanrentuku.com/down/js/images/12447749840.gif) right 0; 
     padding: 
   9px 8px 5px 0; 
    margin: 
   0 0 0 8px; 
    float: 
   left; 
    height: 
   16px;} 
   
 a:hover span{ 
   background: 
   url(http://www.lanrentuku.com/down/js/images/12447749840.gif) right -30px; 
    color: 
   #000; 
     padding: 
   9px 8px 5px 0; 
    margin: 
   0 0 0 8px; 
    height: 
   16px; 
     } 
   
 
   </ 
   style 
   > 
   
 
   </ 
   head 
   > 
   
 
   
 
   < 
   body 
   > 
   
 
   < 
   h1 
   >< 
   strong 
   >CSS自适应宽度圆角按钮 @5key.net 查找更多代码，请访问：懒人图库 www.lanrentuku.com  
   </ 
   strong 
   ></ 
   h1 
   > 
   
 
   < 
   a  
   href 
   ="#" 
   >< 
   span 
   >首页 
   </ 
   span 
   ></ 
   a 
   > 
   
 
   < 
   a  
   href 
   ="#" 
   >< 
   span 
   >不是首页 
   </ 
   span 
   ></ 
   a 
   > 
   
 
   < 
   a  
   href 
   ="#" 
   >< 
   span 
   >他也许是首页 
   </ 
   span 
   ></ 
   a 
   > 
   
 
   < 
   a  
   href 
   ="#" 
   >< 
   span 
   >但他一定不是首页 
   </ 
   span 
   ></ 
   a 
   > 
   
 
   < 
   a  
   href 
   ="#" 
   >< 
   span 
   >好了，就这样把。别扯了~ 
   </ 
   span 
   ></ 
   a 
   > 
   
 
   </ 
   div 
   > 
   
 
   </ 
   body 
   > 
   
 
   </ 
   html 
   >