如何使导航栏覆盖整个页面？

Question

我对这种东西还很陌生。 我只希望导航栏从一侧到另一侧覆盖页面，而不是在两侧和顶部都留有空白。

这是我的CSS

nav ul {list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3E3F43;}

nav li {float: left;}

nav li a {display: block;
       color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;}

li a:hover{background-color: #7559A6;}


Here is my HTML

<nav>

    <ul>
        <li><a href="home.html" class="active">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="resume.html">Resume</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>

</nav>

Answer 1

给您的导航ID

   <nav id=nav">

并将其宽度设置为100％

    #nav{
    width:100%;
    }

Answer 2

首先，从body删除默认边距

 body {
      margin: 0;
    }

然后：

CSS表

 body { margin: 0; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #3E3F43; display: table; width: 100%; } nav li { display: table-cell } nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #7559A6; } 

 <nav> <ul> <li><a href="home.html" class="active">Home</a> </li> <li><a href="about.html">About</a> </li> <li><a href="resume.html">Resume</a> </li> <li><a href="blog.html">Blog</a> </li> <li><a href="contact.html">Contact</a> </li> </ul> </nav> 

Flexbox的

 body { margin: 0; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #3E3F43; display: flex; } nav li { flex:1; } nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #7559A6; } 

 <nav> <ul> <li><a href="home.html" class="active">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="resume.html">Resume</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> 

Answer 3

添加你的CSS

nav{ position: absolute; width: 100%;left: 0;top: 0;}