如何使徽标图标显示在页脚的右侧？

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.当我尝试将 li 项目放在页脚右侧时，会出现问题。

 <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>

Answer 1

You can use the following CSS to float the items to the right side of your footer.您可以使用以下 CSS 将项目浮动到页脚的右侧。

.footer-media-links {
    float: right;
}

Answer 2

.footer-media-links ul {
  display: flex;
  list-style: none;
  justify-content: flex-end; /* pushes the content to right side */
}

Answer 3

I changed your HTML and added a whole new CSS... Hopefully your don't mind:)我更改了您的 HTML 并添加了一个全新的 CSS...希望您不要介意:)

 * { 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!祝你有美好的一天！

如何使徽标图标显示在页脚的右侧？

问题描述

3 个解决方案

解决方案1
0 2020-10-27 16:32:30

解决方案2
0 2020-10-27 16:41:39

解决方案3
0 2020-10-27 16:45:30

如何使徽标图标显示在页脚的右侧？

问题描述

3 个解决方案

解决方案1 0 2020-10-27 16:32:30

解决方案2 0 2020-10-27 16:41:39

解决方案3 0 2020-10-27 16:45:30

解决方案1
0 2020-10-27 16:32:30

解决方案2
0 2020-10-27 16:41:39

解决方案3
0 2020-10-27 16:45:30