我想在我的网页末尾用 HTML 和 CSS 设置“隐私政策”[重复]

Posted 2023-03-21

【中文标题】我想在我的网页末尾用 HTML 和 CSS 设置“隐私政策”[重复]

【英文标题】：I want to set the "privacy policy" at the end of my webpage in HTML and CSS [duplicate]

【发布时间】：2016-12-19 02:48:15

【问题描述】：

“隐私政策”链接显示在我的网页中间。我需要将它设置在我的页面底部。下面给出的是我的 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>

【参考方案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>

【参考方案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 adisplay: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;