如何使列表在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包裝到

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

應該幫助你，讓你微調其餘

Answer 2

要飄你的社交鏈接列表項的權利。

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

Answer 3

我建議在<div>和float: rigth;之間包裝<ul>。