我的导航栏中的这个额外框在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

.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 2

你应该更新这个css部分，如果你需要宽度请分配。

.nav ul {
    display:table;
}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以在此处使用 Flexbox 。对于盒子，你可以在这里使用 calc（）。

Stack Snippet

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您应该在a = [1; 2; 3; 4; 5; 6; 7; 8; 9; 10]; b = [1, 2, 3; 4, 5, 6; 7, 8, 9]; c = zeros(3,1); d = rand([4 1],'single'); A = cell(4,1) ; A{1} =a ; A{2} = b ; A{3} = c ; A{4} = d ; 课程中添加display: table！

这应该是你的最终代码：

.nav

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

Answer 5

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

＆＃13;

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;