如何在页面的最左边和最右边显示项目？

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>

我的错误是什么？

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>

Answer 2

您的布局不是您预期的原因是因为您在 html 中有 .name，但在 css 中有 .title。更正 class 名称，浮点数也将起作用。也没有必要 display: inline-block 和 width: 100%。 <div>默认为块，占100%宽度

也就是说，flex 更容易垂直对齐内容。

.title {
    float: left;
}

.social {
    float: right;
}

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

如何在页面的最左边和最右边显示项目？

How can I display items on the extreme left and right of the page?

html

css

frontend

alignment

display