Question

因此，当我使浏览器变小时，您将看到菜单栏和下拉菜单会发生什么，确保在开始使浏览器变小时将其设为完整页面，因此如何阻止其发生或其他解决方案是什么？并且请不要介意我没有制作一个合法网站的标题，并且摆脱负面投票，请它惹我生气。

html5编码有一个.current课程，请不要介意我还没有对课程做过任何事情，这里是一个完整的网站演示。

＆＃13;

body{
	margin:0;
	padding:0;
	overflow-y:scroll;
}
#Mainnav ul li a{
	color: #fff;
	text-decoration: none;
	width: 33%;
	background-color: #CDCDCD;
	border-radius: 10px;
	float: left;
	display: block;
	text-align: center;
	margin-left: 25%;
	list-style-type: none;
}
#Mainnav a:hover {
	background-color: #666;
}
#Top {
	color: #FFB700;
	font-family: black-ops-one;
	font-style: normal;
	font-weight: 400;
	text-align: center;
	font-size: x-large;
}
#Mainnav ul li {
	display: block;
	float: left;
	width:33%;
	list-style-type:none;
}
#Mainnav ul ul li {
	width: 100%;
	text-decoration: none;
	display:block;
}
#Mainnav ul ul a {
	padding-right:40px;
	margin-top:10px;
	text-align:right;
	
}
#Mainnav ul ul{
	display: none;
	position: absolute;
	bottom: 35px;
	top: 131px;
}
#Mainnav ul li:hover ul{
	display: block;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>The Website</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/black-ops-one:n4:default;source-sans-pro:n4:default.js" type="text/javascript"></script>
</head>
<body>
<!--Heading-->
<header id="Top"><h1>ShayanShow</h1></header>
<!--MenuBar-->
<nav id="Mainnav">
<ul>
<li><a href="#">Home</a></li><li>
<a href="#">About Us</a></li><li>
<a href="#">Contacts</a><ul>
<!--DropDown List-->
<li><a href="#">FaceBook</a></li><li>
<a href="#">Twitter</a></li><li>
<a href="#">MySpace</a>
</li>
</ul>
</li>
</ul>
</nav>

</body>
</html>

＆＃13;

我希望你现在明白这个问题吗？

Answer 1

您似乎正在使用两种不同的样式来响应浏览器大小的变化。向左飘浮;和宽度：33％;

通常在使用百分比类型调整CSS中的任何内容时会导致浏览器重新调整大小时的百分比变化，因此如果您希望在浏览器大小更改时您的菜单系统保持静态，请尝试使用更精确的测量值精确的像素测量。

当使用float：left时，float是一种响应式样式，它会随着屏幕大小而变化，所以当没有足够的空间让所有元素都适合它时会迫使它们进入一个新的行或压缩某种程度你可以尝试使用flexbox解决方案或尝试用巧妙的边距进行黑客攻击

但是如果您希望您的菜单系统保持相对静态但是在不同的浏览器/屏幕尺寸上工作，请尝试使用媒体查询使不同屏幕尺寸下的样式工作方式不同。

祝你好运

如何在浏览器大小更改时不调整元素大小？

1 个答案: