css - Bootstrap-无序列表社交媒体图标格式问题

我在引导程序上构建了该网站（http://ec2-54-186-23-70.us-west-2.compute.amazonaws.com/index.html）；但是，我在右上方的社交媒体图标上遇到加载问题。

如您所见，当网站加载社交媒体图标堆栈时，它们应该彼此相邻。但是，当单击链接时，格式会自行更正，并且社交媒体图标彼此相邻对齐。

这是代码：

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

CSS：

 /* Social Media Header */
.header-social {
    float:left;
    margin-top:0px;

}

.header-social ul {
        float:left;
        padding:0;
        margin-left:0px;
}

.header-social li {
    float:right;
    list-style:none;
    margin-left:5px;
}

.header-social span {
    float:right; !important;
}

@media (mx-width: 767) {
.header-social {
        display:none;
}

.header-social ul {
        display:none;
}

.header-social li {
    display: none;
}


}

/* responsive Social Media Header */
@media (max-width: 992px) {
.header-social {
    float:left;  !important;
    margin-left: -42px;
    margin-top:5px;

}

.header-social ul {
        float:right;
        padding:0;
        margin-left:0px;
}

.header-social li {
        float:right;
        list-style:none;
        margin-left:5px;
    }

.header-social span {
    float:right;
    }
}

我该如何解决这个问题？

最佳答案

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

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