时间戳

首页 > 解决方案 > 将图标移动到 h2 标题下方？

html - 将图标移动到 h2 标题下方？

问题描述

在此处输入图像描述出于某种原因，我似乎无法弄清楚如何将我的社交媒体图标移动到社交媒体 h2 标题下方。我希望它们水平显示而不是垂直显示。有什么帮助吗？

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="footer-section social media col-md-3">
  <h2>Social Media</h2>
  <div class="social-media">
    <ul class="list-unstyled">
      <li><a href="#"><i class="fa fa-facebook-square" 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-instagram" 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-youtube-play" aria-hidden="true"></i></a></li>
    </ul>
  </div>
</div>

.social-media {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .social-media > li:not(:last-child) {
    margin-right: 1rem;
  }

标签： htmlcss

解决方案

您可以使用flexbox在标题下水平对齐它们

.list-unstyled {
  list-style: none;
  display: flex;
  padding: 0;
}
/*
  Add a bit of margin at the left side of each icon, except for the first one 
*/
li:not(:first-child) {
  margin-left: 0.5em;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="footer-section social media col-md-3">
  <h2>Social Media</h2>
  <div class="social-media">
    <ul class="list-unstyled">
      <li><a href="#"><i class="fa fa-facebook-square" 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-instagram" 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-youtube-play" aria-hidden="true"></i></a></li>
    </ul>
  </div>
</div>

推荐阅读