Horizontale Fußzeile aus einer gestapelten Fußzeile

Ich fragte mich, ob jemand wusste, wie man aus einem gestapelten einen horizontalen Fuß richtig macht. Zurzeit habe ich drei Zeilen eines Social-Media-Icons, eines meiner Namen, und eines, das eine Schaltfläche ist. Ich möchte, dass sie auf dem Desktop in derselben Zeile und zentriert sind. Wenn jemand mir einen Rat geben könnte, der wirklich helfen würde! Vielen Dank!Horizontale Fußzeile aus einer gestapelten Fußzeile

<script 
 
\t \t \t src="https://code.jquery.com/jquery-1.11.3.min.js" 
 
\t \t \t integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g=" 
 
\t \t \t crossorigin="anonymous"></script>    
 
<script src="SlickNav-master/dist/jquery.slicknav.js"></script> 
 
      
 
<script> 
 
\t $(function(){ 
 
\t \t $('#menu').slicknav(); 
 
\t }); 
 
</script>

@media screen and (min-width: 568px){ 
 
    #powered_by_storenvy {display: none !important;} 
 
} 
 

 
@media screen and (min-width: 568px){ 
 
#footer_info {display: none;} 
 
} 
 
    #footer_links { 
 
    position: relative; 
 
    width: 100%; 
 
    text-align: center; 
 
    
 
    background: #1FA0A3; 
 

 
    font-size: 16px; 
 
    font-size: 1.6rem; 
 
    border-top: none; 
 
    padding:20px; 
 
    
 
} 
 

 
#footer_links ul { 
 
    
 
    text-transform: uppercase; 
 
    padding-left: 0; 
 
} 
 

 
#footer_links li { 
 
    line-height: 24px;line-height: 2.4rem; 
 
    list-style: none; 
 
    background-color: #1FA0A3;  /*: Footer background :*/ 
 
    margin-bottom: 5px;margin-bottom: .5rem; 
 
} 
 

 
#footer_links ul a { 
 
    color:black; 
 
    text-decoration: none; /*: Footer Links :*/; 
 
    padding: 0 6px; 
 
\t padding: 0 .6rem; 
 
    
 
} 
 

 
#footer_links a:hover { 
 
    color: #BBBBBB;     /*: Footer Links Hover :*/ 
 
} 
 

 
.footer-small { 
 
    font-size: 12px; 
 
    font-size: 1.2rem; 
 
} 
 

 

 
.ghost-button { 
 
    color: black; 
 
    
 
    border: 1px solid #009688; 
 
    font-size: 17px; 
 
    padding: 7px 12px; 
 
    font-weight: normal; 
 
    margin: 6px 0; 
 
\t width:250px; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    font-family: 'Philosopher', sans-serif; 
 
    
 
} 
 

 
.ghost-button:hover, .ghost-button:active { 
 
    color:#fff; 
 
    background:#009688; 
 
}

<script src="https://use.fontawesome.com/a74e3d793f.js"></script> 
 

 
<div id="footer_links"> 
 
    <ul> 
 
    <li> 
 
     <a href="/contact"><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i> 
 
</a> 
 
     <a href="/faq"><i class="fa fa-tumblr fa-2x" aria-hidden="true"></i> 
 

 
</a> 
 
     <a href="http://www.facebook.com" target="_blank"><i class="fa fa-twitter fa-2x " aria-hidden="true"></i></a> 
 
     <a href="http://www.blogger.com" target="_blank"><i class="fa fa-facebook fa-2x " aria-hidden="true"></i> 
 
\t </a> 
 
    
 
    </li> 
 
    <span class="footer-small"> MaKayla &copy; 2017</span> 
 
    
 
    
 
    <li> 
 
    <a href="https://superdevresources.com/super-simple-ghost-button-css/" class="ghost-button" target="_blank">Resume</a> \t 
 
    \t 
 
    </li> 
 
    </ul> 
 
</div>

Quelle

2017-02-09 Cakers

Entschuldigung, ich verstehe nicht genau, was Sie versuchen zu tun? Die Symbole scheinen alle in einer Reihe zu sein. Wollten Sie, dass die anderen Links in der gleichen Zeile stehen? –

Ich möchte nur den gesamten Inhalt in einer Zeile, so dass die Social-Media-Symbole auf der linken Seite der Reihe, mein Name in der Mitte und der Knopf ganz rechts @Braeden Orchard – Cakers

können Sie tun das mit einer @media Abfrage und Flexbox. Dies wird es tun, wobei 600px der Haltepunkt ist, an dem Elemente geändert werden sollen.

@media (min-width:600px) { 
    #footer_links ul { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    } 
}

Quelle

2017-02-09 00:20:20

Dies funktionierte wie ein Traum! Vielen Dank @Michael Coker – Cakers

@Cakers süße np! –

Horizontale Fußzeile aus einer gestapelten Fußzeile

Antwort

Verwandte Themen