html - 我的 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>