by zhangxinxu 2010-01-20 19:05

inline-block与float实现宽度自适应按钮

inline-block方法
css代码:
.btn1{display:inline-block; background:url(../image/sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;} .btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(../image/sina_gray_btn.png) no-repeat right top;}
HTML代码:
<a href="javascript:void(0);" class="btn1"><cite>inline-block方法</cite></a>
float方法
css代码:
.btn2{float:left; background:url(../image/sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;} .btn2 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(../image/sina_gray_btn.png) no-repeat right top;}
HTML代码:
<a href="javascript:void(0);" class="btn1"><cite>float方法</cite></a>