Question

好吧，所以我在这里尝试了很多不同的东西，但我似乎无法让我的菜单栏一直延伸到整个页面。左侧有一个小间隙。我在这里错过了什么吗？

到目前为止，这是我能够让我的页脚在页面底部居中的唯一方法。每次我将左右边距设置为自动时，它都会将页脚与菜单栏对齐。还有更好的方法吗？

谢谢。

<!DOCTYPE html>

<html>
<head>
    <title>Connor Lepert: Homepage</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=UTF-8">
    <link rel="icon" href="logo.png">
        <style>
            @font-face {
              font-family: Vanadine; 
              src: url(vanadine.ttf);
            }

            body {
              background-image: url(bckgrnd.jpg); 
              background-size: 100%; 
              background-repeat: no-repeat; 
              font-family: sans-serif; 
              color: white;
            }

            a {
              color: white; 
              font-family: Vanadine; 
              text-decoration: none;
            }

            a:hover {
              color: yellow;
            }

            p {
              color: white; 
              font-family: Vanadine;
            }

            footer {
              position: fixed; 
              display: block; 
              margin-left: 45%; 
              margin-right: 45%; 
              text-align: center; 
              margin-top: 320px;
            }

            #siteid {
              margin-left: auto; 
              margin-top: auto
            }

            #menubar {
              background-color: #ABADB0; 
              width: 100%; 
              height: 20px; 
              display: block; 
              margin-left: auto; 
              margin-right: auto; 
              margin-top: auto; 
              text-align: center; 
              word-spacing: 20px; 
              position: fixed; 
            }

            #header {
              display: block; 
              margin-left:auto; 
              margin-right: auto; 
              text-align: center; 
              margin-top: 330px;
            }
        </style>
</head>

<body>
        <div id="siteid"><img src="logowhite.png" width="50px" alt="Personal logo"/></div>
        <div id="header"><img src="header.png" width="400" alt="Lepert"/></div>
        <div id="menubar">
            <a href="index.html">Home</a>
            <a href="aboutme.html">About</a>
            <a href=mailto:clepert13@gmail.com>Contact</a>
            <a href="portfolio.html">Portfolio</a>
            <a href="scrapyard.html">ScrapYard</a>
        </div>

    <footer>©<a href=> 2015 by Connor Lepert </a> <br> <p></p> </footer>  
</body>
</html>

Answer 1

你必须添加一个余量：0到你的身体

Answer 2

我创建了一个包装类并包装需要在其中居中的代码。这是一个例子：

.wrapper {
margin: 0 auto;
width: 960px;
}

<html>
    <div class="navbar">
        <div class="wrapper">
            <p>Content goes here</p>
        </div><!--wrapper-->
    </div><!--navbar-->
</html>

您只需要确保将包装类放在内容之前，但是在需要重复的背景之后。这在我的例子中显示。否则，你将把所有东西都集中在它需要的位置，但是你的背景会被切断，因为它被包含在一个960像素的区域里。

Answer 3

就像Artefact已经说过的那样，将margin:0添加到您的body将消除您的菜单栏下方的空隙。

稍微解释一下：
这种差距是由您的浏览器引起的，实际上每个浏览器都有一些元素的预设（即h1的大小以及链接的显示方式），这些预设因浏览器而异。
出于这个原因，大多数人会使用css重置来为自己的css提供一个干净的起点。

有一些资源可用于重置，例如meyerweb中可以使用的资源，或者您只需编写自己的资源。

如何让菜单栏成为中心并一直延伸到最后？

3 个答案: