Question

我正在为我的网站工作。我从font-awesome中添加了社交媒体徽标，并将其放在我的页脚中间。当我添加链接时，徽标不再位于中间，您无法在右侧看到链接。我对HTML / CSS比较新，我不知道如何修复它。我应该改变它在第二张图片中的样子？我怎样才能改变＆＃34; px＆＃34;在CSS文件中进入＆＃34;％＆＃34;它在每台显示器上看起来都一样吗？

对不起，如果我的英语不是最好的，请提前致谢。：）

它看起来像什么

应该是什么样的

我的代码：

＆＃13;

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  position: fixed;
  height: 40px;
  background-color: #999999;
}
footer ul.footerleft{
    margin-left: 150px;
    margin-top: 10px;
}
footer ul.footerleft li{
    display: inline;
    margin-right: 25px;
}
footer a{
    color: #222;
}

footer a:hover{
    color: #ffffff;
    text-decoration: none;    
}
.social:hover {
     -webkit-transform: scale(1.0);
     -webkit-transition-duration: 0.5s;
 }
 .social {
     -webkit-transform: scale(0.8);
     color: #222;
     
 }

＆＃13;

<!-- footer -->
    <footer class="footer">
        <nav class="navbar navbar-default navbar-custom">
            <div class="container-fluid">
                <div class="nav navbar-nav navbar-left">
                    <ul class="footerleft">
                        <li>
                            <a href="">Link 1</a>                   
                        </li>
                        <li>
                            <a href="">Link 2</a>                    
                        </li>
                        <li>
                            <a href="">Link 3</a>
                        </li>
                    </ul>
                </div>

                <div class="text-center center-block">
                    <a href=""><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
                    <a href=""><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
                    <a href=""><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a>
                    <a href=""><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
                </div>
                <div class="nav navbar-nav navbar-right">
                <ul>
                    <li>
                        <a href="">Link 4</a>
                    </li>
                    <li>
                        <a href="">Link 5</a>
                    </li>
                    <li>
                        Text
                    </li>
                </ul>
            </div>

            </div>
            
        </nav>
    </footer>

＆＃13;

Answer 1

我通过将导航栏右侧div移动到顶部来实现它。

<footer class="footer">
    <nav class="navbar navbar-default navbar-custom">
        <div class="container-fluid">
            <div class="nav navbar-nav navbar-right">
                <ul class="footerright">
                    <li>
                        <a href="">Link 4</a>
                    </li>
                    <li>
                        <a href="">Link 5</a>
                    </li>
                    <li>
                        Text
                    </li>
                </ul>
            </div>

            <div class="nav navbar-nav navbar-left">
                <ul class="footerleft">
                    <li>
                        <a href="">Link 1</a>
                    </li>
                    <li>
                        <a href="">Link 2</a>
                    </li>
                    <li>
                        <a href="">Link 3</a>
                    </li>
                </ul>
            </div>

            <div class="text-center">
                <a href=""><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
                <a href=""><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
                <a href=""><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a>
                <a href=""><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
            </div>

        </div>

    </nav>
</footer>

然后为footerright添加了一些css：

footer ul.footerright{
        margin-right: 150px;
        margin-top: 10px;
    }
    footer ul.footerright li{
        display: inline;
        margin-right: 25px;
    }

Bootstrap页脚 - 链接 - 社交媒体徽标 - 链接

1 个答案: