html - 如何在页面的最左侧和最右侧显示项目？

Question

我正在做一个电子商务网站。对于页脚，我想将电子商务的品牌名称放在左上方，将社交媒体图标链接放在右上方。

我想要的布局如下：

但是，页脚当前如下所示：

这是我编码的内容。

.footer-top {
  display: inline-block;
  width: 100%;
}

.title {
  float: left;
}

.social {
  float: right;
}

<div class="footer-top">
  <div class="name">
    <h1><span class="bigger">XXXX</span></h1>
  </div>
  <div class="social">
    <!--Social media icons-->
    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-instagram"></a>
  </div>
</div>

我的错误是什么？

标签： htmlcssfrontendalignmentdisplay

Answer 1

您可以使用display:flex;样式导航栏。复制这些代码并粘贴到您的CSS中，而不是您提供的代码。

.footer-top {
   display:flex;
  justify-content:space-between;
  align-items:center;
}

<div class="footer-top">
  <div class="name">
    <h1><span class="bigger">XXXX</span></h1>
  </div>
  <div class="social">
    <!--Social media icons-->
    <a href="#" class="fa fa-facebook">fb</a>
    <a href="#" class="fa fa-instagram">insta</a>
  </div>
</div>