欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

我的頁腳中的鏈接堆疊在一起

CSS
劉柏宏2年前8瀏覽0評論

我想讓我的鏈接一個接一個，但是它們堆積起來了。

我怎樣才能實現(xiàn)這一點？

enter image description here

看到了嗎？在左邊的角落。

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>

所有的鏈接都是堆疊的，因為它在絕對位置上對齊。 移除位置:標簽樣式上的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"  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>

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>