gpt4 book ai didi

html - 放大时如何防止导航栏将元素移动到下一行?

转载 作者:行者123 更新时间:2023-11-28 01:30:13 25 4
gpt4 key购买 nike

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

在过去的几天里,我在互联网上看到这个问题一百次,试图解决我的问题,但绝对没有任何效果。当我在谷歌浏览器中放大时,我的导航栏将最后一个链接移到下一行,有效地破坏了整个布局。我是 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;
}

我可以看出有些事情我不明白,我只是需要一些帮助才能真正解决这个问题。我已经挣扎了几天了。

此外,我非常担心缩放的原因是这个网站主要是从我 parent 的电脑上查看的,他们将 Chrome 设置为 125% 缩放以获得更好的可见性。

最佳答案

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

关于html - 放大时如何防止导航栏将元素移动到下一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30534815/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com