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

Question

我在 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; 
    }
}

我该如何解决这个问题？

Answer 1

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

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