如何像图片中那样在页脚中左右放置文本

Question

首先，这是我在 Whosebug 中的第二个问题，所以不要太严格 :( 。我正在尝试使用 html、css 有时 bootstrap 创建模板在页脚中，我想将文本放在右侧，例如“条款和条件，隐私”，并在左侧放置社交媒体图标。

我尝试使用列，但出了点问题，或者它不起作用。

我的声望不在 10 级，所以我希望屏幕截图能帮助您理解...更多信息是我希望整个模板居中，所以我使用了 class 和 wrap。

https://i.stack.imgur.com/4fEIY.png

Answer 1

您没有提供代码，但您可以这样做。

有很多方法可以做到这一点，您可以使用 flex-box，或者只使用位置，或者像我在下面所做的那样浮动。

.footer{
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  min-height: 15px;
  border: thin solid #d3d3d3;
}
.block{
  display: inline-block; /* important */
}

.shift-right{
  float: right;  /* important */
}

<div class="footer">
  <div class="block ">Left Content</div>
  <div class="block shift-right"> Right Content</div>
</div>

Answer 2

基本上你可以使用 display: flex 和 justify-content: space-between 来实现。

/* Important things */
footer {
  display: flex;
  justify-content: space-between;
}



/* Decorative */
a {
  text-decoration: none;
  color: #555;
}

a + a {
  margin-left: 10px;
}

footer {
  background-color: #eee;
  padding: 20px 40px;
}

<footer>
  <section>
    <a href="#">Terms and Conditions</a>
    <a href="#">Privacy</a>
  </section>
  
  <section>
    <a href="#">Follow</a>
    <a href="#">&spades;</a>
    <a href="#">&clubs;</a>
    <a href="#">&hearts;</a>
  </section>
</footer>

Answer 3

在 Bootstrap 4 上，您可以使用 float-right 和 float-left 类。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js"></script>

<section>
  <a href="#" class="text-dark">Terms and conditions</a>
  <a href="#" class="text-dark">Privacy</a>
  <div class="iconHere float-right">
    Follow
    <i class="fab fa-facebook-f"></i>
    <i class="fab fa-twitter"></i>
    <i class="fab fa-instagram"></i>
  </div>
</section>

您可以查看完整文档here。

如何像图片中那样在页脚中左右放置文本

how to put text right and left in a footer like the one in the image

html

css

footer

bootstrap-4