如何使菜單欄居中並一直延伸？

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>

您只需要確保將包裝器類放在內容之前，但是要放在需要重復的背景之后。 這在我的示例中顯示。 否則，您將以所需的一切為中心，但是背景將被截斷，因為它包含在960px的區域中。

Answer 3

就像Artefact已經說過的那樣，為您的body增加margin:0將消除菜單欄下面的間隙。

只需一點解釋：
這種差距是由您的瀏覽器引起的，實際上每個瀏覽器都有一些元素的預設（即h1的大小和鏈接的顯示方式），並且這些預設因瀏覽器而異。
因此，大多數人會使用css重置為自己的css提供一個干凈的起點。

您可以使用多種資源進行重置，例如可以使用meyerweb的資源，也可以只編寫自己的資源。

如何使菜單欄居中並一直延伸？

問題描述

3 個解決方案

解決方案1
0 2015-04-22 20:21:22

解決方案2
0 2015-04-22 20:29:03

解決方案3
0 2015-04-22 20:37:13

如何使菜單欄居中並一直延伸？

問題描述

3 個解決方案

解決方案1 0 2015-04-22 20:21:22

解決方案2 0 2015-04-22 20:29:03

解決方案3 0 2015-04-22 20:37:13

解決方案1
0 2015-04-22 20:21:22

解決方案2
0 2015-04-22 20:29:03

解決方案3
0 2015-04-22 20:37:13