by zhangxinxu 2010-01-20 19:05

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

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>