Question

编辑：由jirikuchta解决！我在CSS中的#navigation中添加了white-space: nowrap;。继续阅读以获取有关已修复问题的更多信息。希望它可以帮助其他人！

过去几天我在互联网上看过这个问题一百遍试图解决我的问题，但绝对没有任何对我有用。当我在谷歌浏览器中放大时，我的导航栏会将最后一个链接切换到下一行，从而有效地破坏了整个布局。我是html的新手，但这是我遇到的第一个真正的障碍，我绝对难倒。我已经按照无数其他网站上的建议，添加了最小宽度和最大宽度，包装，位置，切换到em和％，但没有任何效果。我假设问题是，当你缩放时，事情会变得圆整并使得所提供的空间太大，但我根本不知道如何解决这个问题。在此先感谢您的帮助！

HTML：

<!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>

CSS：

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

我可以说有一些我不理解的东西，我只是需要一些帮助来真正解决这个问题。我现在已经挣扎了几天。

此外，我非常担心缩放的原因是该网站主要是从我父母的电脑上查看的，并且他们将Chrome设置为125％缩放以提高可见度。

Answer 1

不确定它是否有帮助，但可以尝试将white-space: nowrap应用于#navigation元素。

如何在放大时保持导航条不会将元素移动到下一行？

1 个答案: