Question

我正在尝试向网页添加精灵，但精灵没有正确显示。我希望它看起来固定在标题的右侧。它悲惨地失败了！我究竟做错了什么？

以下是它的样子：

以下是我的风格部分：

//...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中使用 ID （#facebook，#linkedin），但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正常工作

2 个答案: