我页脚中的链接相互堆叠

Question

我想让我的链接相互跟随，但它们却堆叠在一起。

我怎样才能做到这一点？

看到了吗？在左下角。

HTML:

<footer>
  <p class="footer text-left">
    <a href="#">Facebook</a>
    <a href="#">Instagram</a>
    <a href="#">Twitter</a>
    <a href="#">GitHub</a>
    <a href="#">OpenCollective</a>
  </p>
  <p class="footer text-right">Skott.io &copy; 2020</p>
</footer>

CSS:

footer {
    .footer {
        font-family:'Ubuntu Mono',monospace;
        font-size:8pt;
        font-weight:400;
        text-transform:uppercase;
        letter-spacing:-0.1px;
        margin:0 5px;
        display:block;
    }

    a {
        display:inline-block;
        position:absolute;
        text-decoration:none;
    }

    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0
}

Answer 1

所有 a 链接都是堆叠在一起的，因为它是按绝对位置对齐的。删除 a 标签样式上的 position: absolute，它将正常工作。

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

footer .footer {
  font-family: 'Ubuntu Mono', monospace;
  font-size: 8pt;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.1px;
  margin: 0 5px;
  display: block;
}

footer a {
  display: inline-block;
  text-decoration: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<footer>
  <p class="footer float-left">
    <a href="#">Facebook</a>
    <a href="#">Instagram</a>
    <a href="#">Twitter</a>
    <a href="#">GitHub</a>
    <a href="#">OpenCollective</a>
  </p>
  <p class="footer float-right">Skott.io &copy; 2020</p>
</footer>

Answer 2

footer {
  display: flex;
  justify-content: space-between; /* to spread the content from left to right */
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0
}

.footer {
  font-family:'Ubuntu Mono',monospace;
  font-size:8pt;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-0.1px;
  margin:0 5px;
  display:block;
}

footer a {
  display:inline-block;
  text-decoration:none;
  margin-right: 5px; /* you can change as per your requirement */
}

<footer>
  <p class="footer text-left">
    <a href="#">Facebook</a>
    <a href="#">Instagram</a>
    <a href="#">Twitter</a>
    <a href="#">GitHub</a>
    <a href="#">OpenCollective</a>
  </p>
  <p class="footer text-right">Skott.io &copy; 2020</p>
</footer>

我页脚中的链接相互堆叠

The links in my footer are stacked on top of each other

html

css

bootstrap-4

footer