如何让我的菜单栏居中并一直延伸？

好的，所以我在这里尝试了很多不同的东西，但我似乎无法让我的菜单栏在页面上一直延伸。左侧有一个小小的差距。我在这里错过了什么吗？如何让我的菜单栏居中并一直延伸？

到目前为止，这是我能够让页脚稍微集中在页面底部的唯一方法。每次将左右页边距设置为自动时，都会使页脚与菜单栏保持一致。有没有更好的方法来做到这一点？

谢谢。

<!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:[email protected]>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>

来源

2015-04-22 Connor Lepert

必须只需添加一个保证金：0你的身体

来源

2015-04-22 20:21:22 ZeGregg

我创建一个包装类和包装需要进行内它为中心的代码。例如：

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

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

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

来源

2015-04-22 20:29:03 TheHappyPeanut

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

只是一点点解释：
此间隙是由您的浏览器造成的，其实每一个浏览器有一些元素的一些预设（的即大小h1以及如何显示的链接）的预设从浏览器和不同浏览器。
因此，大多数人会使用css重置来为自己的css提供一个干净的起点。

有几种重置资源，比如meyerweb，你可以使用它或者你可以简单地编写自己的资源。

来源

2015-04-22 20:37:13 chrispop

如何让我的菜单栏居中并一直延伸？

回答

相关问题