Css 引导-无序列表社交媒体图标格式化问题

我在bootstrap上建立了这个网站；但是，右上角的社交媒体图标存在加载问题

如您所见，当网站加载社交媒体图标时，它们应该彼此相邻，但它们却堆叠在一起。但是，当点击链接时，格式会自动更正，社交媒体图标彼此对齐

代码如下：

                    <ul class="header-social"> 


                        <a href="https://www.facebook.com/tinitroninc"><li class="facebook social-slide"></li></a>
                         <a href="https://www.youtube.com/user/tinitroninc"><li class="youTube social-slide"></li></a>
                         <a href="https://twitter.com/TinitronInc"><li class="twitter social-slide"></li></a>
                         <a href="https://www.linkedin.com/company/tinitron-inc-?trk=company_name"><li class="linkedIn social-slide"></li></a>


                    </ul>

---

如何更正此问题

将锚定链接放在列表元素中

<li><a>click me</a></li>

---

我正在通过CSS加载社交媒体图标。若我将链接更改为内部链接，则链接将不起作用。链接中没有锚文本。还有其他建议吗？感谢您的帮助。将锚环绕在一个空DIV周围，您可以通过CSS将图像签名到该DIV。

<li><a>click me</a></li>