css 在我的页脚链接堆叠在对方的顶部

vshtjzan 于 2023-05-19 发布在其他

关注(0)|答案(2)|浏览(135)

我想让我的链接遵循对方，而是他们堆积起来。
我如何才能做到这一点？

看到了吗在左边角落。

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
}

<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

来源：https://stackoverflow.com/questions/64557787/the-links-in-my-footer-are-stacked-on-top-of-each-other

2条答案

按热度按时间

toe950271#

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

赞(0）回复(0）举报 2023-05-19

6pp0gazn2#

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>

赞(0）回复(0）举报 2023-05-19

我来回答

css 在我的页脚链接堆叠在对方的顶部

2条答案

相关问题

热门标签

最新问答