如何使列表在CSS中向右浮动？

Question

我在使.social-links列表正确浮动时遇到问题。

这就是我想要的样子：

这实际上是这样的：

我可以做些什么让我的社交链接看起来像上一张图​​片？

这是我的HTML / CSS：

/* -----------------------------------------------------------------------*/
/* CSS Code */
/* -----------------------------------------------------------------------*/

.row {
    max-width: 1140px;
    margin: 0 auto;
}

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 49.2%;
}

footer {
    background-color: #333;
    font-size: 80%;
    padding: 40px;
}

.footer-nav {
    list-style: none;
    float: left;
}

.social-links {
    list-style: none;
    float: right;
}


.footer-nav li,
.social-links li {
    display: inline-block;
    margin-right: 13px;
}

.footer-nav li:last-child,
.social-links li:last-child {
    margin: 0;
}

.footer p {
    color: #888;
    text-align: center;
    margin-top: 30px;
}

.footer-nav li a:link,
.footer-nav li a:visited,
.social-links li a:link,
.social-links li a:visited {
    text-decoration: none;
    border: 0;
    color: #888;
    transition: color 0.2s;
}

.footer-nav li a:hover,
.footer-nav li a:active {
    color: #ddd;
}

.social-links li a:link,
.social-links li a:visited {
    font-size: 130%;
}

.fa-youtube:hover {
    color: #bb0000;
    
}

.fa-facebook:hover {
    color: #365998;
}

.fa-twitter:hover {
    color: #00aced;
}

.fa-google-plus:hover {
    color: #dd4b39;
}

.fa-pinterest-p:hover {
    color: #cb2027;
}

.fa-paypal:hover {
    color: #10ad10;
}

.fa-youtube,
.fa-facebook,
.fa-twitter,
.fa-google-plus,
.fa-pinterest-p,
.fa-paypal,
.social-links i {
    transition: color 0.2s;
}


.footer-copyright {
    clear: both;
    text-align: center;
}

<footer>
        <div class="row">
                <div class="col span-1-of-2">
                    <ul class="footer-nav">
                        <li><a href="#">Articles</a></li>
                        <li>&verbar;</li>
                        <li><a href="#">Resources</a></li>
                        <li>&verbar;</li>
                        <li><a href="#">Entertainment</a></li>
                        <li>&verbar;</li>
                        <li><a href="#">Misc</a></li>
                        <li>&verbar;</li>
                        <li><a href="#">About Me</a></li>
                        <li>&verbar;</li>
                        <li><a href="#">Site Map</a></li>
                    </ul>
                </div>
                <div class="col span-1-of-2">
                    <ul class="social-links">
                        <li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
                        <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
                        <li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
                        <li><a href="#"><i class="fa fa-paypal" aria-hidden="true"></i></a></li>
                    </ul>
                </div>
        </div>
        <div class="row">
            <div class="footer-copyright">
                <p>
                    Copyright &copy; 2010 - 2016 by Heather Ferris. &nbsp;&nbsp;&nbsp; All rights reserved.
                </p>
            </div>
        </div>
    </footer>

Answer 1

在我看来，就像你给了两个DIV同一个班级一样，所以他们都没有真正明确地定义你想要达到的目标。

尝试添加其他样式类

.right {
position: absolute;
right: 10%;

然后更改社交链接的div包装器＆＃39;到

<div class="col span-1-of-2 right">

它可以帮助你，让你微调其余的

Answer 2

我建议将<ul>包裹在<div>和float: rigth;之间。

Answer 3

您希望将社交链接列表项浮动到右侧。

.social-links li {
    display: inline-block;
    margin: 0 5px;
    float: right;
}