html - 背景图像无法使用 css 正确显示

Question

我遇到了图像无法正确显示在其他图标后面的问题。我正在应用两个单独的图像来环绕图标。第一个显示正常，但第二个显示在底部。

这是网站，可以在页脚中看到错误:http://everythingdisc.hubs.vidyard.com/

<div class="inner">
    <div class="icons">
        <a href="https://www.linkedin.com/company/inscape-publishing?trk=company_name" id="linkedin">&nbsp;</a>
         <a href="https://twitter.com/everything_disc " id="twitter">&nbsp;</a>
         <a href="http://www.youtube.com/user/InscapeChannelDev" id="youtube">&nbsp;</a>
    <div class="clear-left">&nbsp;</div>
    </div>
</div>

这是我正在使用的 CSS:

#social-media .inner {
  display: inline-block;
  height: 74px;
  padding: 0 0 0 30px;
  background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat;
}

#social-media .inner .icons {
  display: inline-block;
  width: auto;
  height: 59px;
  padding: 15px 20px 0 0;
  background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat;
}

有人知道为什么图像不显示属性吗？

Answer 1

您需要为两个 div 提供相同的高度。

#social-media .inner {
display: inline-block;
height: 74px;
padding: 0 0 0 30px;
background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat;
}

#social-media .inner .icons {
display: inline-block;
width: auto;
height: 74px;
padding: 15px 20px 0 0;
background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat;
}