自适应宽度按钮

最新推荐文章于 2022-06-12 11:49:25 发布

weixin_30338481

最新推荐文章于 2022-06-12 11:49:25 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/919czzl/p/4711895.html

按钮的宽度会随着字数而变

<title>无标题文档</title>
<style type="text/css">
a{
    float:left;
    text-decoration:none;
    display:block;
    height:37px;
    line-height:37px;
    text-align:center;
    font-weight:bold;
    color:#FF6600;
    font-size:14px;
    background:url(an3.gif) 0 0 no-repeat;
    margin:5px;
    padding-left:18px;
}
span{
    display:block;
    background:url(an3.gif) no-repeat right 0;
    padding-right:20px;
}
a:hover{
    background:url(an3.gif) 0 -37px no-repeat;
}
a:hover span{
    background:url(an3.gif) no-repeat right -37px;
}
</style>
</head>

<body>
<p>
<a href="#"><span>免费注册</span></a>
<a href="#"><span>登录</span></a></p>
<a href="#"><span>在淘宝上免费开店</span></a>
</p>
</body>