Html 放大时如何防止导航栏将元素移动到下一行？_Html_Css_Google Chrome_Navigation

Html 放大时如何防止导航栏将元素移动到下一行？

html css google-chrome navigation

Html 放大时如何防止导航栏将元素移动到下一行？,html,css,google-chrome,navigation,Html,Css,Google Chrome,Navigation,编辑：由解决！我添加了空白：nowrap在我的CSS中导航。请继续阅读以了解有关已修复问题的更多信息。希望它能帮助其他人在过去的几天里，我已经在互联网上看到了上百次这个问题，试图解决我的问题，但对我来说绝对没有任何效果。当我在Google Chrome中放大时，导航栏会将最后一个链接移到下一行，从而破坏了整个布局。我不熟悉html，但这是我遇到的第一个真正的障碍，我完全被难住了。我在无数其他网站上遵循了这个建议，添加了最小宽度和最大宽度、包装、位置，切换到em和%，但没有任何效果。我假设问题是

编辑：由解决！我添加了

空白：nowrap在我的CSS中导航。请继续阅读以了解有关已修复问题的更多信息。希望它能帮助其他人
在过去的几天里，我已经在互联网上看到了上百次这个问题，试图解决我的问题，但对我来说绝对没有任何效果。当我在Google Chrome中放大时，导航栏会将最后一个链接移到下一行，从而破坏了整个布局。我不熟悉html，但这是我遇到的第一个真正的障碍，我完全被难住了。我在无数其他网站上遵循了这个建议，添加了最小宽度和最大宽度、包装、位置，切换到em和%，但没有任何效果。我假设问题是，当你放大时，物体会聚集起来，使物体过大，无法容纳所提供的空间，但我只是不知道如何解决这个问题。提前感谢您的帮助
HTML:
我可以说有些事情我不明白，我只是需要一些帮助来真正弄清楚。我已经挣扎了几天了
另外，我之所以如此关注缩放，是因为这个网站主要是从我父母的电脑上浏览的，他们还将Chrome设置为125%缩放以获得更好的可视性。
不确定是否有帮助，但可以尝试将空白：nowrap
应用到#导航
元素。这解决了我的问题！我感到很欣慰。非常感谢！
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>About</title>
<link rel="shortcut icon" type="image/x-icon" href="layoutImages/favicon.png">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,800' rel='stylesheet' type='text/css'>
<link href="webpage.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="fancyBox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancyBox/source/jquery.fancybox.pack.js"></script>
</head>

<body>
<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>
<div id="banner"><img src="layoutImages/aboutBanner.png" width="955" height="400" draggable="false" style="-moz-user-select: none; display:block; " /></div>

@charset "UTF-8";

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 li {
    font: 35px Arial Black;
    display: inline;
}
#navigation a {
    padding:9px 35px;
    background-color:#0080c2;
    color:#F8F7E4;
    text-decoration:none;
}
#navigation a:hover {
    background-color:#F8F7E4;
    color:#000;
}