放大时，导航栏不会占据页面的整个宽度

Question

如果您在浏览器上放大到 110% 或更多，可以看到我的问题 here。（它发生在 Chrome，我不确定其他浏览器）。

基本上，在右侧，当您放大时，您可以在 'contact' 按钮后看到几个像素的灰色条。我假设这是因为我设置了我的按钮，所以有每个单词周围都有一定数量的蓝色区域，缩放时会弄乱。我想知道是否有任何方法可以保留此 button-size 格式，但也可以在默认情况下使其在放大时完全填充 space。我希望这是有道理的。

HTML:

<body>
<div id="wrapper">
<div id="container">
<nav>
    <div id="navigation">
        <ul>
            <li><a href="index.html">home</a></li><li><a href="about.html">about</a></li><li><a href="milk.html">milk</a></li><li><a href="farm.html">the farm</a></li><li><a href="contact.html">contact</a></li>
        </ul>
    </div>
</nav>

CSS:

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, address, blockquote {
    margin: 0px;
    padding: 0px;
    font-size: 16px/9px;
    font-style: normal;
}
html {
    background-color:#F8F7E4;
}
#container {
    width:955px;
    height:auto;
    background-color:#d2d2de;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
#navigation {
    white-space: nowrap;
}
#navigation li {
    font: 35px Arial Black;
    display: inline;
    white-space: nowrap;
}
#navigation a {
    padding:9px 35px;
    background-color:#0080c2;
    color:#F8F7E4;
    text-decoration:none;
}
#navigation a:hover {
    background-color:#F8F7E4;
    color:#000;
}

此外，这个缩放问题如此重要的原因是我的 parents 计算机会经常查看此站点，并且他们已将其发送到 Chrome 的 125% 缩放。

Answer 1

为您的 div#navigation

添加背景颜色

#navigation {
background-color: #0080c2;
}

放大时，导航栏不会占据页面的整个宽度

Nav bar does not take up full width of page when zoomed in

css

google-chrome

navigation

width

zooming