使页脚中的 <a> 标记位于左侧，另一个位于右侧[重复]答案

【问题标题】：Make an <a> tag in a footer stick to the left and the other to the right [duplicate]使页脚中的 <a> 标记位于左侧，另一个位于右侧[重复]
【发布时间】：2020-09-22 13:09:32
【问题描述】：

我有两个标签，一个链接到上一个页面，另一个链接到下一个，并且我已将它们都放在页脚中。在 CSS 中，如果没有其他标签加入，我无法让每个标签都粘在页脚的一侧。

我尝试的第一件事是将“下一个”设置为“右”，将“上一个”设置为“左”，但它不起作用。我尝试了“文本对齐”，但只将它们放在中心。

--!> HTML <--
<footer>
<a class="prev" onclick="location.href='#'">&#10094;</a>
  <a class="next" onclick="location.href='#'">&#10095;</a>
</footer>

/* CSS */


  /* Next and previous buttons */
.prev, .next {
  cursor: pointer;
  padding: 22px;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  user-select: none;
  
}

.prev:hover, .next:hover {
  background-color: white;
}

/* Footer */

 footer {
    background: rgba(0,136,169,1);
    color: #090e5e;
    font-size: 12px;
    padding: 20px 0px;
    overflow: hidden;
    bottom: 0;
    }

【问题讨论】：

标签： html css

【解决方案1】：

您可以像下面这样简单地使用flexbox 来确保页脚中的<a> 标签贴在left 和右侧的other 上

使用flex 是现代browsers 的最佳方式，因为它也非常响应性。

footer {
  background: rgba(0, 136, 169, 1);
  color: #090e5e;
  font-size: 12px;
  padding: 20px 0px;
  overflow: hidden;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}

理想情况下，我会建议将您的 <a> 包装在 div 中，以便样式不适用于整个页脚，而仅适用于 div

<footer>
  <div class="arrow_buttons">
    <a class="prev" onclick="location.href='#'">&#10094;</a>
    <a class="next" onclick="location.href='#'">&#10095;</a>
  </div>
</footer>

在div 上使用CSS - 如下所示：

.arrow_buttons {
    display: flex;
    justify-content: space-between;
 }

现场工作演示：

/* Next and previous buttons */

.prev,
.next {
  cursor: pointer;
  padding: 22px;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  user-select: none;
}

.prev:hover,
.next:hover {
  background-color: white;
}


/* Footer */

footer {
  background: rgba(0, 136, 169, 1);
  color: #090e5e;
  font-size: 12px;
  padding: 20px 0px;
  overflow: hidden;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}

<footer>
  <a class="prev" onclick="location.href='#'">&#10094;</a>
  <a class="next" onclick="location.href='#'">&#10095;</a>
</footer>

【讨论】：