本文就是利用css和html自适应于文本菜单的长度。
后效果图实现，例如下列：
实现代码例如以下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu4.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
a{
display: block;
height:38px;
/* width:107px; */
/* line-height: 2; */
line-height: 38px;
text-align: center;
background: url(./c2.jpg) no-repeat 0px 0px;
color:#d84700;
font-size: 14px;
weight:bold;
text-decoration: none;
padding-left: 18px;
float:left;
margin:5px;
}
a span{
display: block;
background: url(./c2.jpg) no-repeat right 0px;
padding-right: 20px;
}
a:hover{
background: url(./c2.jpg) no-repeat 0px -38px;
}
a:hover span{
background: url(./c2.jpg) no-repeat right -38px;
}
</style>
</head>
<body>
<p><a href="#"><span>免费注冊</span></a>
<a href="#"><span>登入</span></a>
<a href="#"><span>在网上开店</span></a></p>
</body>
</html>
版权声明：本文博主原创文章。博客，未经同意不得转载。
原文：http://www.cnblogs.com/bhlsheji/p/4813587.html