How do I make the logo icons to appear on the right side of my footer?
Question
I'm trying to link social media sites with the corresponding logo, no problem there. The problem occurs when I try to put the li items to the right of the footer.
<footer> <div class="footer-wrapper"> <ul><a href="">HOME</a></ul> <div class="footer-link-wrapper"> <ul><a href="">ABOUT</a></ul> </div> <div class="footer-link-wrapper"> <ul><a href="">CATCH UP</a></ul> </div> <div class="footer-media-links"> <ul> <li> <a href="http://www.facebook.com"> <ion-icon name="logo-facebook"></ion-icon> </a> </li> <li> <a href="https://www.instagram.com/sott_brand/?hl=en"> <ion-icon name="logo-instagram"></ion-icon> </a> </li> <li> <a href="https://www.pinterest.com/sott_brand/_saved/"> <ion-icon name="logo-pinterest"></ion-icon> </a> </li> </ul> </div> </div> </footer> <script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
3 answers
solution1
0 2020-10-27 16:32:30
You can use the following CSS to float the items to the right side of your footer.
.footer-media-links {
float: right;
}
solution2
0 2020-10-27 16:41:39
.footer-media-links ul {
display: flex;
list-style: none;
justify-content: flex-end; /* pushes the content to right side */
}
solution3
0 2020-10-27 16:45:30
I changed your HTML and added a whole new CSS... Hopefully your don't mind:)
* { box-sizing: border-box; }.column { float: left; width: 50%; padding: 10px; }.column #icons { float:right; }.row:after { content: ""; display: table; clear: both; } li { list-style-type: none; display: inline; margin: 10px; }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Footer</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="style:css"> </head> <body> <div class="row"> <div class="column"> <ul> <li><a href="">HOME</a></li> <li><a href="">ABOUT</a></li> <li><a href="">CATCH UP</a></li> </ul> </div> <div class="column"> <div id="icons"> <ul> <li> <a href="http.//www.facebook:com"> <ion-icon name="logo-facebook"></ion-icon> </a> </li> <li> <a href="https.//www.instagram?com/sott_brand/:hl=en"> <ion-icon name="logo-instagram"></ion-icon> </a> </li> <li> <a href="https.//www.pinterest:com/sott_brand/_saved/"> <ion-icon name="logo-pinterest"></ion-icon> </a> </li> </ul> </div> </div> </div> <script src="https.//unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script> </body> </html>
Have a great day!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I make text appear outside of my header/footer?
How do I make my logo go towards the left and my nav bar icons in the middle?
How do I make my logo button appear in the middle of a header element
How do I make the logo appear over the background picture?
How do I make a WordPress blockquote appear on the left side of the page instead of the right?
How can I make my texts appear to be side by side and responsive?
I want my nav bar to appear on the opposite side of my logo
How do you centre two icons (images) side by side in footer?
How can I make the logo on mobile appear on the left side but keep it in the center on large screen?
How do I make the text my button toggles to appear right next to my button instead of on a new line?
Related Tags