一张背景图的自适应按钮

2010/02/10  |  09:20分类:Css  |  标签:  |  58 views

其实很多时候都是用到自适应,用的最多的也就是导航,按钮的。根据实际字数需要,扩展或者缩小宽度。

hmtl代码:

<span>
<button>确定充值,去网银付款</button>
</span>

css代码:

span {
 background:url(bg_comb.png) 100% 0;
 height:32px;
 display:inline-block;
 padding:0 5px 0 0;
 text-align:center;
 font-size:14px !important;
 vertical-align:middle;
 width:auto;
}
button {
 display:inline-block;
 border:0;
 background:url(bg_comb.png) 0 0;
 height:32px;
 line-height:30px;
 padding:0 10px 5px 15px;
 color:#fff;
 vertical-align:middle;
 white-space:nowrap;
 overflow:visible;
}

其实我也是个懒人,这里不给出图片和预览了,如果又需要的。可以自己按照样式,亲自测试下。

喜欢本文,那就收藏到: Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

发表您的评论