如何在浏览器大小发生变化时使其不调整元素大小？

-3

因此，当我让浏览器变小时，您会看到菜单栏和下拉菜单会发生什么情况，确保在开始缩小浏览器时使其成为整页，因此如何避免发生或另一种解决方案任何？并且请不要介意标题我没有做一个合法的网站并且摆脱反对票它讨好我。如何在浏览器大小发生变化时使其不调整元素大小？

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

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

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

我希望你现在理解这个问题？

来源

2014-12-27 A Cat

所以你想让下拉菜单保持相同的大小，如果浏览器最小化？ –

请了解[缩进]（http://en.wikipedia.org/wiki/Indent_style）。 –

你可以放在jsfiddle请不要在这里得到问题 –

看起来好像您正在使用两种不同的样式，这会对浏览器大小发生变化作出反应。 float：left;和宽度：33％;

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

当使用float：left时，float是一个响应式样式，它随着屏幕大小而变化，所以当没有足够的空间容纳所有元素时，会强制它们进入一个新行或者压缩尝试使用flexbox解决方案或尝试使用灵活的边距进行黑客入侵

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

好运

来源

2014-12-28 23:00:46

谢谢你的回答让我更感觉:) –

如何在浏览器大小发生变化时使其不调整元素大小？

回答

相关问题