为什么我有这个差距，我该如何删除它

Question

我遇到了一个小问题，我将导航栏设置为100％宽度，现在我的页面右侧有一个间隙，页面有一个水平滚动条，我不知道为什么做到了这一点。请参阅随附的代码。 他的代码是：

nav {

    width: 100%;
    height: 35px;
    text-align: center;
    background-color: #42C2DA;
    padding: 6px;
    margin-bottom: 50px;
}
nav ul {

    padding: 7px;
    margin: 1px;
    width: 100%;

}
nav li {

    display: inline;
    padding: 5px;
    margin: 5px;

}
nav li a {

    color: white;
    text-decoration: none;
    padding: 4px;

}

nav li a:link a:visited {

    font-weight: bold;

}

有人可以解释我哪里出错......或者这里发生了什么。 我没有10名代表，因此无法发布照片。

Answer 1

您的导航栏有padding:6px;这会为div的所有边增加6px，这意味着该元素的实际宽度不是100%，而是100% + 12px。

要解决此问题，请尝试使用box-sizing: border-box，这样可以将您的填充计算为指定的100％宽度。

Answer 2

水平滚动条可能是因为你设置了：

• width: 100%
• padding: 6px

因此您将拥有总宽度：视口的100％+ 12px

设置box-sizing: border-box，这可以解决您的问题 - more info about box-sizing。