如何让我的导航栏覆盖整个页面？

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

如何让我的导航栏覆盖整个页面？

How do I get my navigation bar to cover the whole page?

html

css

nav