如何在UL和LI内垂直间隔我的链接?

时间:2012-06-28 07:39:30

标签: html css

我有以下HTML:

<ul style="float: right; margin-left: 5px;" id="status-infos">

   <li><a id="A"class="button sprite-arrow-circle" ></a></li>
   <li>
      <a id = "B" class="button">
         <img width="16" height="16" src="/Images/control-180.png">
      </a>
   </li>
</ul>

CSS:

.sprite-arrow-circle{ background-position: 0 0; width: 16px; height: 16px; }
.button { display: inline-block; }
.button, .form legend, .legend, .mini-menu {
   border: 1px solid white;
   border-radius: 0.417em 0.417em 0.417em 0.417em;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
   font-weight: normal;
   line-height: 1.333em;
   outline: 0 none;
   padding: 0.167em 0.5em 0.25em;
   text-decoration: none;
   text-shadow: none;
} 
a.button {
    background-color: transparent;
    background-image: url(/Images/sprite.png);
    background-position: 0 -396px;
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
}

id = A链接上面没有空格,下面有一个大空格。

id = B链接在中心垂直间隔,上方和下方有空格。这看起来很完美。

任何人都可以解释可能发生的事情。似乎只与图像的链接垂直间隔开 正确的方法。

1 个答案:

答案 0 :(得分:0)

你必须使用CSS3的background-size属性来实现background-image的缩放,CSS2只是剪辑背景,这就是精灵的工作方式。