Question

我在页脚对齐方面遇到了一些麻烦。一切都在左侧，但不在右侧。页脚没有像标题或菜单栏那样的小间隙。

的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>

我的CSS：

#footer {
    background-color: darkblue;
    bottom: 1px;
    color: white;
    height: 8vh;
    position: absolute;
    text-align: center;
    width: 100%;
}

我已经使用Firefox，Edge和Internet Explorer测试了此代码 - 始终是相同的“问题”。但我不知道为什么......

Answer 1

尝试此删除宽度：100％并添加左：0和右：0而不是

Answer 2

这是因为预定义的填充/边距。请添加此css规则：

*{
  padding: 0;
  margin: 0;
}

这是一个简单的重置。我建议你read this about css resets

在片段中查看：

＆＃13;

*{
  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%;
}

＆＃13;

<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>

＆＃13;

页脚与标题和菜单栏不对齐

2 个答案: