无法让 HTML Sprite 正常工作

Question

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

这是它的样子：

这是我的风格部分：

//...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;

    }

这是我的 header 部分：

<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，但是类在你的 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>

Answer 2

我终于明白了。以下是最终对我有用的方法：

<style>
    .linkedin {
        display: inline-block;
        white-space: nowrap;
        width: 16px;
        height: 18px;
        background-image: url('Social-Media-Icons.jpg');
        background-position: 0 0;
    }

    .facebook {
        display: inline-block;
        white-space: nowrap;
        width: 16px;
        height: 18px;
        background-image: url('Social-Media-Icons.jpg');
        background-position: -48px 0;
    }
</style> 

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

无法让 HTML Sprite 正常工作

Can't get an HTML Sprite to work correctly

html

css

sprite