html - 无法让 HTML Sprite 正常工作

Question

我正在尝试将 Sprite 添加到网页，但 Sprite 显示不正确。我希望它固定在标题的右侧。它失败得很惨!我究竟做错了什么？

这是它的样子:

这是我的样式部分中的内容:

//...a bunch of other stuff
#HomeMenu{
        position: relative;
        }
        .linkedin {
        display: inline-block;
        left: 0px;
        width: 80px;
        height: 18px;
        background: url('Social-Media-Icons.jpg')-10px 0;

    }

    .facebook {
        left: 63px;
        display: inline-block;
        width: 80px;
        height: 18px;
        background: url('Social-Media-Icons.jpg')0 0;

    }

这是我的页眉部分:

<nav id="HomeMenu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="aboutme.html">About Us</a></li>
                <li><a href="#">Interest and Goals</a></li>
                <li><a href="Contactus.html">Contact Us</a></li>
                <li><a class="facebook" href="https://www.facebook.com/"></a></li>
                <li><a class="linkedin" href="https://www.linkedin.com/"></a></li>
            </ul></nav>

Answer 1

您在 CSS(#facebook、#linkedin)中使用 ID，但在您的 classes HTML - 不会那样工作...

将 CSS 选择器更改为 .facebook 和 .linkedin(或者反过来:将 a 标签中的 HTML 属性更改为id="facebook 和 id="linkedin)

除此之外，您的 a 标签没有任何内容。由于 a 标签是内联元素，这会导致宽度为 0 的大小，即不可见。将它们更改为 display: inline-block 以解决此问题:

#HomeMenu {
  position: relative;
}

.linkedin {
  display: inline-block;
  width: 95px;
  height: 48px;
  background-image: url('http://placehold.it/100x60/fa0');
}

.facebook {
  display: inline-block;
  width: 95px;
  height: 48px;
  background-image: url('http://placehold.it/100x60/3be');
}

<nav id="HomeMenu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="aboutme.html">About Us</a></li>
    <li><a href="#">Interest and Goals</a></li>
    <li><a href="Contactus.html">Contact Us</a></li>
    <li>
      <a class="facebook" href="https://www.facebook.com/"></a>
    </li>
    <li>
      <a class="linkedin" href="https://www.linkedin.com/"></a>
    </li>
  </ul>
</nav>