图标图像未以内联块方式显示

Question

我有一个小错误让我抓狂。我想以 inline-block 的方式显示三个社交媒体图标。据我所知，我的代码是正确的。我什至做了一个片段，它看起来是正确的。我查看了我的开发工具，没有发现任何导致此问题的原因。它发生在我的网站上，视口为 640 像素或更小。由于屏幕太小，因此很难看出开发工具中的错误。

有没有人看到任何突出的东西？请在 640 像素或更小的视口中查看页面。

Click here to see live

.nav-panel-container {
  position: fixed;
  width: 70%;
  height: 100%;
  top: 0;
  bottom: 0;
  background: #F0F0F0;
  z-index: 1;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.nav-panel-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 50px 0 0 0;
  overflow: auto;
  /* smooth scrolling on touch devices */
  -webkit-overflow-scrolling: touch;
}
#nav-social-container {
  bottom: 8%;
  position: absolute;
  text-align: center;
  display: block;
  width: 80%;
  margin-left: 10%;
}
#nav-social-title {
  font-size: .8em;
}
#nav-social-icons {
  display: inline-block;
  margin-top: 15px;
}
.nav-social-icon {
  padding: 0 15px;
  width: 100%;
}
.nav-social-icon:first-child {
  padding-left: 0;
}
.nav-social-icon:last-child {
  padding-right: 0;
}

<div class="nav-panel-container">
  <div class="nav-panel-content">
    <div id="nav-social-container">
      <div id="nav-social-title">DON'T BE SHY, LET'S GET SOCIAL.</div>
      <div id="nav-social-icons"><span class="nav-social-icon"><a href="http://facebook.com" target="_blank"><img src="http://optimumwebdesigns.com/icons/facebookBlack.png" alt="facebook" height="30px" width="30px"></a></span><span class="nav-social-icon"><a href="http://twitter.com" target="_blank"><img src="http://optimumwebdesigns.com/icons/twitterBlack.png" alt="twitter" height="30px" width="30px"></a></span>
        <span
        class="nav-social-icon">
          <a href="http://linkedin.com" target="_blank">
            <img src="http://optimumwebdesigns.com/icons/linkedInBlack.png" alt="linkedIn" height="30px" width="30px">
          </a>
          </span>
      </div>
    </div>

Answer 1

您正在使用 <span> 标签 - 这些是 display:inline - 将它们更改为 block 或 inline-block。

图标图像未以内联块方式显示

Icon images not displaying in an inline-block fashion

html

css

position