每当我放大我的网页时，我的导航栏就会离开屏幕，当缩小时它很好，是否有一个属性可以让它在缩放/缩小时保持静止，或者是否有任何其他替代方法来解决这个问题？
body, html {
background-size: cover;
font-style: normal;
font-family: "Lato";
font-size-adjust: initial;
font-weight: 400;
line-height: 1,8em;
color: #666;
height: 100%;
margin:0;
}
nav {
width: 100%;
height: 50px;
background:rgba(0, 0, 0, 0.8);
min-width: 1200px;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 210px;
height: 50px;
opacity: 0.8;
line-height: 50px;
text-align: center;
font-size: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
display: block;
z-index: 1;
}
nav ul li:hover {
background-color: skyblue;
cursor:pointer;
}
nav ul li ul li {
display: none;
}
nav ul li:hover ul li {
display: block;
background: #282e34;
z-index: 1;
position: relative;
}<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Hardware</a></li>
<li><a>Software</a>
<ul>
<li><a>System software</a></li>
<li><a>Application software</a></li>
</ul>
</li>
</li>
<li><a>General Computers</a>
<ul>
<li><a>Types of computers</a></li>
<li><a>History of computers</a></li>
</ul>
</li>
<li><a>Credits</a></li>
</ul>
</nav>
</body>
</html>提前致谢。 ..................................................... .....................................
最佳答案
可能是因为导航有 min-width:1200px;。如果您的屏幕尺寸小于 1200 像素，那么导航栏会从页面溢出并导致水平滚动。
我还将 nav li 元素的固定宽度更改为 width:20% 因此它们会随着 nav 收缩和增长。
body, html {
background-size: cover;
font-style: normal;
font-family: "Lato";
font-size-adjust: initial;
font-weight: 400;
line-height: 1,8em;
color: #666;
height: 100%;
margin:0;
}
nav {
width: 100%;
height: 50px;
background:rgba(0, 0, 0, 0.8);
/* min-width: 1200px; */
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
/* width: 210px; */
width:20%;
height: 50px;
opacity: 0.8;
line-height: 50px;
text-align: center;
font-size: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
display: block;
z-index: 1;
}
nav ul li:hover {
background-color: skyblue;
cursor:pointer;
}
nav ul li ul li {
display: none;
}
nav ul li:hover ul li {
display: block;
background: #282e34;
z-index: 1;
position: relative;
}<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Hardware</a></li>
<li><a>Software</a>
<ul>
<li><a>System software</a></li>
<li><a>Application software</a></li>
</ul>
</li>
</li>
<li><a>General Computers</a>
<ul>
<li><a>Types of computers</a></li>
<li><a>History of computers</a></li>
</ul>
</li>
<li><a>Credits</a></li>
</ul>
</nav>
</body>
</html>关于html - 放大时(ctrl+，ctrl-)我的导航栏不会一起去？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54030821/