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

Question

I have a small bug that is driving me nuts. I have three social media icons that I want to display in an inline-block fashion. My code is correct, as far as I can see. I even made a snippet and it looks to be correct. I looked in my dev tools and do not see anything causing this issue. It is happening on my site in a viewport of 640px or less. This is making it hard to see what is wrong in the dev tools because of the small screen.

Does anyone see anything standing out? Please view the page in a viewport of 640px or less.

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 。