我的 html 导航栏中的这个额外框是什么

Question

这是我下面的代码。我的导航栏中有这个额外的空间，不知道为什么它在那里。我只想要3盒。也许，我使这段代码比我的错误更困难。(我只是在学习HTML...

    /* Navigation bar */
.nav {
    width: 510px;
    margin: auto;
    list-style: none;
}
.nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    /*border: : 1px solid blue;*/
    /* This is the color of the nav bar */
    background-color: grey;
    background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
    margin: 0px;
    float: left;
}
.nav a {
    display: block;
    /* The text color */
    color: black;
    /* Sets the text to be centered in the box*/
    text-align: center;
    /* The width */
    width: 130px;
    /* How the text is positioned in the columns*/
    padding: 20px 10px 20px 10px;
    /* The font size*/
    font-size: 25px;
    /* This removes the underline remove the text */
    text-decoration: none;
}
.nav li a:hover:not(.active) {
    background-color: orange;
}
.active {
    background-color: darkorange;
}

<!-- The navigation bar is created here -->
        <div class="nav">
            <ul>
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="games.html">Games</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
    </div>

Answer 1

您应该更新此 css 部分，如果您需要宽度，请分配。

.nav ul {
    display:table;
}

.nav {
    width: 510px;
    margin: auto;
    list-style: none;
}
.nav ul {
    list-style-type: none;
    display:table;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    /*border: : 1px solid blue;*/
    /* This is the color of the nav bar */
    background-color: grey;
    background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
    margin: 0px;
    float: left;
}
.nav a {
    display: block;
    /* The text color */
    color: black;
    /* Sets the text to be centered in the box*/
    text-align: center;
    /* The width */
   /*  width: 130px; */
    /* How the text is positioned in the columns*/
    padding: 20px 10px 20px 10px;
    /* The font size*/
    font-size: 25px;
    /* This removes the underline remove the text */
    text-decoration: none;
}
.nav li a:hover:not(.active) {
    background-color: orange;
}
.active {
    background-color: darkorange;
}

        <div class="nav">
            <ul>
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="games.html">Games</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
    </div>

Answer 2

此处.nav a ( 130px + 20px (*3( 不等于 510px 。 尝试分配正确的测量值

以下代码将起作用

.nav {
  width: 510px;/*Remove this line*/
  ...
  display: table;/*<<<<<<<<Assign the required width*/
}

或

.nav ul {
  ...
  display: table;/*<<<<<<<<Assign the required width*/
}

Answer 3

你可以在这里使用Flexbox。对于盒子，你可以在这里使用 calc((。

堆栈代码段

.nav {
  width: 510px;
  margin: auto;
  list-style: none;
}
.nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  background-color: grey;
  background: linear-gradient( #c7c7c7, #edeae2);
  display: flex;
}
.nav li {
  flex: 0 0 calc(100%/3);
}
.nav a {
  display: block;
  color: black;
  text-align: center;
  padding: 20px 10px 20px 10px;
  font-size: 25px;
  text-decoration: none;
  box-sizing: border-box;
}
.nav li a:hover:not(.active) {
  background-color: orange;
}
.active {
  background-color: darkorange;
}

<div class="nav">
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="games.html">Games</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div>

Answer 4

你应该在.nav类上添加display: table！

这应该是您的最终代码：

/* Navigation bar */
.nav {
  /*width: 510px;*/
  margin: auto;
  list-style: none;
  display: table;
}
.nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  /*border: : 1px solid blue;*/
  /* This is the color of the nav bar */
  background-color: grey;
  background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
  margin: 0px;
  float: left;
}
.nav a {
  display: block;
  /* The text color */
  color: black;
  /* Sets the text to be centered in the box*/
  text-align: center;
  /* The width */
  width: 130px;
  /* How the text is positioned in the columns*/
  padding: 20px 10px 20px 10px;
  /* The font size*/
  font-size: 25px;
  /* This removes the underline remove the text */
  text-decoration: none;
}
.nav li a:hover:not(.active) {
  background-color: orange;
}
.active {
  background-color: darkorange;
}

<!-- The navigation bar is created here -->
<div class="nav">
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="games.html">Games</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div>

Answer 5

将 .nav 宽度设置为 450px，这是li元素的总和

    /* Navigation bar */
.nav {
    width: 450px;
    margin: auto;
    list-style: none;
}
.nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    /*border: : 1px solid blue;*/
    /* This is the color of the nav bar */
    background-color: grey;
    background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
    margin: 0px;
    float: left;
}
.nav a {
    display: block;
    /* The text color */
    color: black;
    /* Sets the text to be centered in the box*/
    text-align: center;
    /* The width */
    width: 130px;
    /* How the text is positioned in the columns*/
    padding: 20px 10px 20px 10px;
    /* The font size*/
    font-size: 25px;
    /* This removes the underline remove the text */
    text-decoration: none;
}
.nav li a:hover:not(.active) {
    background-color: orange;
}
.active {
    background-color: darkorange;
}

<!-- The navigation bar is created here -->
<div class="nav">
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="games.html">Games</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div>