页脚与页眉和菜单栏不对齐
[英]Footer doesn't align with header and menubar
问题描述
I have some trouble with the footer's alignment. 
页脚的对齐方式有些麻烦。 Everything is ok at the left side but not on the right side. 一切都在左侧，但在右侧没有问题。 The footer hasn't no little gap like the header or menubar. 页脚与页眉或菜单栏一样，没有什么空白。
index.html: index.html：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="design.css" type="text/css" rel="stylesheet">
<meta charset="utf-8"/>
<title>Hello World</title>
</head>
<body>
<header id="header">
<a href="#">
<center>
<p>LOGO HERE...</p>
</center>
</a>
</header>
<nav>
<ul id="menu">
<li>
<a href="#">MENU-Item#1</a>
</li>
<li>
<a href="#">MENU-Item#1</a>
</li>
<li>
<a href="#">MENU-Item#1</a>
</li>
<li>
<a href="#">MENU-Item#1</a>
</li>
</ul>
</nav>
<footer id="footer">
<p>Copyright (c) 2016 - All rights reserved</p>
LOREM IPSUM
</footer>
</body>
</html>
my CSS: 我的CSS：
#footer {
background-color: darkblue;
bottom: 1px;
color: white;
height: 8vh;
position: absolute;
text-align: center;
width: 100%;
}
I've tested this code with Firefox, Edge and Internet Explorer -- always the same 'issue'. 我已经使用Firefox，Edge和Internet Explorer测试了此代码-始终是相同的“问题”。 But I don't know why... 但是我不知道为什么
2 个解决方案
解决方案1
0 2016-02-11 21:34:56
尝试执行以下操作以删除宽度：100％，然后添加左：0和右：0
解决方案2
0 2016-02-11 21:43:58
It's because of predefined paddings/margins. 这是由于预定义的填充/边距。 Please add this css rule: 请添加以下CSS规则：
*{
padding: 0;
margin: 0;
}
This is a simple reset. 这是一个简单的重置。 I recommend you to read this about css resets 我建议您阅读有关CSS重置的内容
Check it in a snippet: 检查一下代码段：
*{ padding: 0; margin: 0; } #header{ background-color: darkblue; } #footer { background-color: darkblue; bottom: 1px; color: white; height: 8vh; position: absolute; text-align: center; width: 100%; }
<header id="header"> <a href="#"> <center> <p>LOGO HERE...</p> </center> </a> </header> <nav> <ul id="menu"> <li> <a href="#">MENU-Item#1</a> </li> <li> <a href="#">MENU-Item#1</a> </li> <li> <a href="#">MENU-Item#1</a> </li> <li> <a href="#">MENU-Item#1</a> </li> </ul> </nav> <footer id="footer"> <p>Copyright (c) 2016 - All rights reserved</p> LOREM IPSUM </footer>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.