Question

我有一个让我疯狂的小虫子。我有三个社交媒体图标，我希望以inline-block方式显示。据我所知，我的代码是正确的。我甚至做了一个片段，它看起来是正确的。我查看了我的开发工具，看不到任何导致此问题的内容。它发生在我的网站上640px或更低的视口中。由于屏幕较小，这使得很难看出开发工具出了什么问题。

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

https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-inner-hits.html

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

Click here to see live

Answer 1

您正在使用<span>代码 - 这些代码为display:inline - 将其更改为block或inline-block。

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

1 个答案: