Question

所以在我正在制作导航栏的网站上，我使用此代码。

    <div id="container">
        <a href="index.html"><span>Home</span></a>
        <a href="blackmail.html"><span>Blackmail</span></a>
        <a href="keep_safe.html"><span style="color: #7CFC00">Keeping Safe</span></a>
        <a href="bully.html"><span>Cyberbullying</span></a> 
            <a href="about.html"><span>About</span></a>
    </div>

然而，此导航栏比其他导航栏更宽，完全相同的代码（除了颜色，颜色显示您所在的页面）如果有人告诉我为什么会这样，或者如何解决它，我将不胜感激！

网站 - nibble90.github.io

带有更宽导航栏的页面是保持安全的页面！

Answer 1

将#container代码替换为此代码，它将有效。对于容器宽度，最好使用%或px代替em。

#container {
    display: block;
    width: 25em;
    margin: 0 auto;
    padding: 10px 0px;
    margin-top: 2em;
    text-align: center;
    background-color: #333;
    width: 100%;
}

Answer 2

您的#container菜单有固定宽度（83em）和填充。当您的内容长于页面高度时，会导致出现垂直滚动条，并且您的固定宽度元素无法调整以适应它。

您应将宽度设置为100％，最小宽度为550px，其大小应为边框。这意味着它可以在不同大小的浏览器上更加优雅地适合您的页面，并且还可以根据是否存在垂直滚动条进行自动调整。

所以：

#container{
    width:100%;
    min-width:500px;
    box-sizing:border-box;
}

Answer 3

CSS中的宽度是让你失望的原因。删除宽度，div将匹配大小。

#container {
display: block;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
}

确保将两者都移除，因为那里有两倍的宽度。

一个<div>比其他人宽

3 个答案: