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>

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

1 个答案: