css+html菜单适应性学习的宽度

本文就是利用css和html自适应于文本菜单的长度。

后效果图实现，例如下列：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgyOTE4Mg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

实现代码例如以下：

<!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>