如何让列表在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

您想将社交 link 列表项浮动到右侧。

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

Answer 2

在我看来，您为两个 DIV 赋予了相同的 class，因此它们都没有明确定义您想要实现的目标。

尝试添加

的其他样式 class

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

然后将 'social links' 的 div 包装器更改为

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

它应该能帮到你，让你微调其余的

Answer 3

我建议将 <ul> 包裹在 <div> 之间并对其应用 float: rigth;。

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

How to make a list float to the right in CSS?

html

css

css-float