无法让我的页脚工作(某些文本应该向右浮动，但事实并非如此)

Question

我正在使用Rails 3.2和Ruby 4。我有以下页脚：

<div class="container">
  <footer class="footer">
    <p class="pull-right"><a href="#">Back to top</a></p>
    <p class="pull-left">&copy; <%= Date.current.year %> Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
  </footer>
</div>

以及以下 CSS：

html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}
.footer p {
  position: absolute;
  bottom: 0;
}
body {
  margin-bottom: 60px;
}

我基本上是在尝试将 http://getbootstrap.com/examples/sticky-footer/和 http://getbootstrap.com/examples/carousel/的引导页脚结合起来。

问题：根据需要垂直排列页脚位置。水平方向上应该向左浮动的东西也可以正确定位。问题在于，应该向右浮动的内容位于向左浮动的文本之上，即"返回顶部"浮动在其他文本上。

小问题：另外，当我不在其中添加class="footer"时，它不会实现页脚的CSS。

Answer 1

问题是你的 CSS 使footer内的p标签绝对定位。删除它，它可以工作。此外，我会通过将这些行添加到 footer 标签来整理您的 CSS，这将阻止页脚向右浮动。

left: 0;
padding-left: 50px;
padding-right: 50px;

html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
  left: 0;
  padding-left: 50px;
  padding-right: 50px;
}
.footer p {
  bottom: 0;
}
body {
  margin-bottom: 60px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="container">
  <footer class="footer">
    <p class="pull-right"><a href="#">Back to top</a></p>
    <p class="pull-left">&copy; 2015 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
  </footer>
</div>