我知道还有其他类似的问题已经回答，但它们与我的需求并不完全匹配。我的问题是，每当我将页面缩小到某个点以上（缩放比例低于50％）时，导航栏末尾的1或2个链接就会被向下推至其余页面下方的第二行。但是，当页面尺寸正常或较大时，不会发生这种情况。调整窗口大小时，链接也不会更改大小或比例，仅当缩放比例为33％或25％时。我在CSS中尝试使用“ .nav样式”和“ a”进行各种“位置”操作，但似乎没有任何效果。
当我一直缩小时，如何使导航栏右端的链接缩小并保持与页面其余部分的相对比例？
这是我的html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="div1">
<h1>ConSynth Corporation</h1>
<p></p>
<div class="nav-style">
<p><a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Project Gallery</a>
<a href="#">News</a>
<a href="#">Contact Us</a>
<a href="#">Resources</a>
</p>
</div>
</div>
<div class="div2">
<p></p>
</div>
<div class="div3">
<p></p>
</div>
<div id="black-box">
<div id="black-box-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum enim sem, gravida eu facilisis vel, mollis eget turpis. Morbi dignissim magna eu dui sagittis, ac semper enim ullamcorper. Phasellus scelerisque lobortis libero et laoreet. Vivamus suscipit erat sed quam consequat, pharetra dignissim ligula pharetra. Nulla a dui vel eros viverra rutrum sed at orci. Nullam id aliquam sem, in eleifend lectus. Integer non libero et eros sagittis tincidunt. Nam ornare, est sed dapibus auctor, lectus lorem luctus elit, at semper enim odio ac metus. Aliquam lacinia lacinia turpis et dapibus.
<br />
<br />
Integer ac magna lobortis, dictum ligula sed, vestibulum urna. Cras eget placerat augue. Sed sit amet purus magna. Sed malesuada, nulla vitae consectetur posuere, diam odio accumsan metus, eget consectetur odio ante at velit. Etiam tincidunt justo at augue porttitor vulputate. Suspendisse hendrerit sit amet sem porta suscipit. Donec porta libero odio, non commodo orci faucibus at. Duis nisl erat, facilisis ut sem adipiscing, luctus scelerisque ante. Vestibulum felis dolor, porta eu nunc vel, sodales semper lorem. Curabitur varius lorem eget accumsan aliquam. Nam sem odio, condimentum et cursus nec, tempor id ipsum.
<br />
<br />
Duis porttitor lacus a sem lacinia vestibulum nec quis neque.
Fusce sit amet porttitor sem. Nunc a laoreet est. Pellentesque facilisis dolor augue, sit amet aliquam justo vehicula quis. Pellentesque interdum a augue et convallis. Integer augue quam, consectetur at tortor quis, pulvinar gravida dolor. Praesent eu volutpat lacus. Integer risus nisi, venenatis non blandit vitae, feugiat ac ipsum. Etiam eu congue velit. </p></div>
<div id="grey-login">
<form id="usn">
Username: <input type="username" name="usn">
</form>
<form id="pwd">
Password: <input type="password" name="pwd">
</form>
<input type="submit" name="submit" value="Log In" id="submit" onclick="alert('Hello world!')"/>
</div>
</div>
</div>
</body>
</html>
这是我的CSS：
@charset "UTF-8";
/* CSS Document */
.container {
width: 1366px;
height: 1409px;
border: 2px solid black;
border-radius: 10px;
margin: auto;
positon: relative;
}
.div1 {
width: 1366px;
height: 253px;
background-color: black;
margin-top: -68px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
position: relative;
}
.div2 {
width: 1366px;
height: 591px;
background-color: white;
margin: none;
}
.div3 {
width: 1366px;
height: 550px;
background-color: #688E23;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
position: absolute;
z-index: 10;
}
#black-box {
width: 1278px;
height: 437px;
background-color: black;
border-radius: 15px;
position: absolute;
z-index: 20;
margin-top: 30px;
margin-left: 45px;
}
#black-box-text {
width: 730px;
height: 390px;
position: absolute;
z-index: 30;
color: white;
text-align: justify;
font-family: Arial,"Arial", Helvetica, sans-serif;
font-size: 24px;
margin-left: 470px;
padding-left: 10px;
padding-right: 45px;
overflow: auto;
}
#grey-login {
width: 387px;
height: 382px;
background-color: #cfcfcf;
background-image: url('images/login-image.jpg');
background-repeat: no-repeat;
background-position: 5% 5%;
border-radius: 15px;
margin-left: 30px;
margin-top: 25px;
position: relative;
}
#usn {
max-width: 175px;
margin-left: 205px;
padding-bottom: 10px;
padding-top: 20px;
position: relative;
z-index: 40;
text-align:center;
}
#pwd {
max-width: 175px;
margin-left: 205px;
padding-top: 20px;
padding-bottom: 10px;
position: relative;
z-index: 40;
text-align:center;
}
input[type=username] {
border: 1px solid #999;
border-radius: 7px;
height: 30px;
min-width: 150px;
max-width: 150px;
-webkit-appearance: none;
}
input[type=password] {
border: 1px solid #999;
border-radius: 7px;
height: 30px;
min-width: 150px;
max-width: 150px;
-webkit-appearance: none;
}
#submit {
background-color: #353535;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
color: #fff;
font-family: 'Arial';
font-size: 20px;
text-decoration: none;
cursor: pointer;
border:none;
padding: 5px 20px;
margin-top: 20px;
margin-left: 150px;
}
#submit:hover {
border: none;
background: #DD1900;
box-shadow: 0px 0px 1px #777;
}
h1 {
font-family: Baskerville, Georgia, "Times New Roman", Times, serif;
color: #FFF;
font-size: 100px;
font-weight:100;
text-align:center;
margin-bottom:85px;
}
a {
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
color: white;
text-align: center;
margin: 0 35px;
font-size: 22px;
padding-left: 50px;
padding-top: 50px;
}
.nav-style {
position: relative;
}
我对HTML和CSS不熟悉，这里的一些代码是我在紧急情况下从其他人那里复制的。我需要尽快将此文件提交给我想与之进行实习的人员，因此非常感谢您的快速响应。谢谢。
PS：我只是发现zoom选项只会弄乱Chrome中的链接位置，但是当我在Safari中尝试时并没有发生。我尚未尝试在IE上进行放大和缩小，以查看它如何在其中工作。这是一个JSFiddle
最佳答案
大屏幕和缩放窗口不同。别担心，伙计。一切都好..
关于html - 缩小页面时如何阻止导航链接移动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22119759/