Question

我有两个<ul>标签，其中包含指向网页的链接和指向社交图标的链接。当我创建第二个<ul>标记以获得这样的社交图标时，它们如何不对齐：

这是我的网站：https://bgrnature.herokuapp.com/#/contact-us

<footer>
    <div id="footer">
        <div class="container">
            <ul class="nav navbar-nav">
                <li><a ui-sref="home">Home</a></li>
                <li><a ui-sref="about-us">About Us</a></li>
                <li><a ui-sref="faqs">FAQS</a></li>
                <li><a ui-sref="contact-us">Contact us</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right footer-icons">
                <li><a href="" class="inactiveLink">Copyright © 2016 </a></li>
                <li><i class="fa fa-facebook fa-inverse" aria-hidden="true"></i><a href=""></a></li>
                <li><i class="fa fa-youtube fa-inverse" aria-hidden="true"></i><a href=""></a></li>
                <li><i class="fa fa-linkedin fa-inverse" aria-hidden="true"></i><a href=""></a></li>
            </ul>
        </div>
    </div>
</footer>

应用padding-bottom或margin-top根本没有效果。我该如何解决这个问题？

Answer 1

请将f()放在i内，并将a课程设为.social。

<强> HTML

margin

<强> CSS

<ul class="nav navbar-nav navbar-right footer-icons">
            <li><a href="" class="inactiveLink">Copyright © 2016 </a></li>
            <li><a href="#"><i class="fa fa-facebook fa-inverse" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-youtube fa-inverse" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-linkedin fa-inverse" aria-hidden="true"></i></a></li>
        </ul>

Answer 2

为社交图标的li创建课程并给予margin-top：15px

.social{
  margin-top:15px;
}

Codepen - http://codepen.io/nagasai/pen/NrpGzL

如何在页脚中对齐社交图标

2 个答案: