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

【问题标题】：Nav bar does not take up full width of page when zoomed in放大时导航栏不会占据页面的整个宽度
【发布时间】：2015-06-02 23:27:16
【问题描述】：

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

基本上，当您放大时，您可以在右侧看到“联系人”按钮后的几个像素的灰色条。我假设这是因为我设置了按钮，因此有一定数量的每个单词周围的蓝色区域，缩放时会变得混乱。我想知道是否有任何方法可以保持这种按钮大小的格式，但也可以在默认情况下让它在放大时完全填充空间。我希望这是有道理的。

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

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

【问题讨论】：

标签： css google-chrome navigation width zooming

【解决方案1】：

将背景颜色添加到您的div#navigation

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

【讨论】：

我不敢相信我没有想到这一点.. 但有时你的大脑会被最简单的解决方案阻塞！非常感谢。
没问题，有时你就是只见树木不见森林 :)