61,112
社区成员
发帖
与我相关
我的任务
分享a>span+背景图片按钮如何自适应宽度？
a>span+背景图片按钮如何自适应宽度？
在ie6下不设定宽度，按钮会等于100%宽，有什么办法？必须要设定宽度吗？
demo地址：http://linjuming.lzrcz.com/question/btn_center/btn.html
在ie6下不设定宽度，按钮会等于100%宽，有什么办法？必须要设定宽度吗？
demo地址：http://linjuming.lzrcz.com/question/btn_center/btn.html
<!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>
<title>page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<style type="text/css">
*{margin:0;padding:0}
.box{margin:50px;background-color:tan;text-align:center;padding:20px;}
.btn {
display:inline-block;
padding-left: 15px;
background-position: left top;
text-align: center;
background-repeat: no-repeat;
color: #FFFFFF;
font-size: 20px;
font-weight: bold;
cursor: pointer;
word-spacing: 0;
background-image:url(btn_left.png);
height:52px;
line-height:52px;
}
.btn span {
padding-right: 15px;
display: block;
height: 100%;
background-position: right top;
background-repeat: no-repeat;
width: auto;
cursor: pointer;
background-image:url(btn_right.png);
}
.w150{width:150px;}
</style>
<div class="box">
<a href="#" class="btn w150"><span>hello world</span></a>
</div>
<div class="box">
<a href="#" class="btn"><span>hello world</span></a>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
CSS自适应宽度圆角按钮
<html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS自适应宽度圆角按钮</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(41205957519.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;}
a:hover{background:url(41205957519.gif) left 30px;height:30px;}
a span{background:url(41205957519.gif) right 0; padding:9px 8px 5px 0; margin:0 0 0 8px; float:left; height:16px;}
a:hover span{background:url(41205957519.gif) right 30px; color:#000; padding:9px 8px 5px 0; margin:0 0 0 8px; height:16px; }
</style>
</head>
<body>
