我想在网页末尾设置 HTML 和 CSS 中的"privacy policy"

Question

"隐私政策"链接显示在我的网页中间。我需要把它放在页面的底部。下面给出的是我的CSS和HTML源代码。我不能把它放在底部。

#footer {
  width: 700px;
  margin: 0 auto;
  padding-top: 200px;
}
#footer p {
  text-align: center;
  padding: 30px;
  font-size: 10px;
}

<div id="footer">
  <p>  Copyright&copy; 2016&nbsp;school.pythonanywhere.com.&nbsp;All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'privacy' %}">Privacy policy</a></p>
</div>

Answer 1

使用position:absolute;尝试以下解决方案:

html, body {
  margin:0;
  padding:0;
}
#footer {
  width: 700px;
  margin: 0 auto;
  position: absolute;
  bottom:0;
}
#footer p {
  text-align: center;
  padding: 30px;
  font-size: 10px;
}

<div id="footer">
  <p>  Copyright&copy; 2016&nbsp;school.pythonanywhere.com.&nbsp;All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'privacy' %}">Privacy policy</a></p>
</div>

提示:你也可以使用position:fixed;，如果你想看到页脚的所有时间在页面的末尾(滚动)

你想要链接隐私政策"在一个新的行吗?

你必须在块元素的页脚设置<a>，如下所示:

html, body {
  margin:0;
  padding:0;
}
#footer {
  width: 700px;
  margin: 0 auto;
  position: absolute;
  bottom:0;
}
#footer p {
  text-align: center;
  padding: 30px;
  font-size: 10px;
}
#footer a {
  display:block;
}

<div id="footer">
  <p>  Copyright&copy; 2016&nbsp;school.pythonanywhere.com.&nbsp;All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'privacy' %}">Privacy policy</a></p>
</div>

Answer 2

您需要将锚标(a)的默认显示属性更改为display:block。

#footer {
    width: 700px;
    margin: 0 auto;
    padding-top: 200px;
}
#footer p {
    text-align: center;
    padding: 30px;
    font-size: 10px;
}
#footer p a{display:block}

<div id="footer">
  <p>  Copyright&copy; 2016&nbsp;school.pythonanywhere.com.&nbsp;All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'privacy' %}">Privacy policy</a></p>
</div>

但是如果你在你的a标签中添加width，如果你不添加width，那么a标签将在悬停时使用空白，这将是很好的。

#footer p a{
  display:block;
  max-width:80px;
  margin:0 auto;
}