我遇到了一个学校项目,因为我无法解决问题。 每当我调整窗口大小时,菜单就会崩溃。我正在分享截图和我的剧本。
这是在最大化窗口视图期间:
当我调整窗口大小时,当我最小化所有菜单选项时,会发生这种情况:
我正在与此页面的脚本共享,但它正在所有页面上发生。请查看以下脚本:
#topnav {
height:50px;
width:100%;
position: relative;
display:inline-block;
font-size: 14pt;
background-color:black;
font-family:'Times New Roman', Times, serif;
overflow: hidden;
}
#menu1 {
margin-left: 120px;
margin-top: 10px;
display: block;
float: left;
color:Highlight;
overflow: hidden;
}
#menu1 a {
color: Highlight;
text-decoration: none;
}
#menu2 {
margin-top: 10px;
margin-right: 120px;
display: block;
float:right;
color: white;
position:relative;
}
#menu2 a {
color: white;
text-decoration: none;
}
#menu2 a:hover {
color: Highlight;
}
.main {
min-height: 850px;
height:auto;
width: 100%;
margin: 0 auto -142px;
display:inline-block;
position:relative;
}
.clear {
height: 100px;
}
.footer {
height: 50px;
width: 100%;
color: white;
text-align: left;
display: block;
bottom: -1px !important;
left: 0;
background-color: black;
z-index: -1;
position:page;
}
.footer a {
color: cornflowerblue;
text-decoration: none;
}
#wrapper{
margin-left:auto;
margin-right:auto;
width:100%;
}

<body style="height: 631px">
<div id="wrapper">
<div id="topnav" >
<span id="menu1">
<a href="Login.aspx" runat ="server">APPLY FOR AUDIENCE</a> <a href="~/Groups.aspx" runat="server">APPLY FOR GROUPS</a>
</span>
<span id="menu2">
<a href="Home.aspx" runat="server">HOME</a> <a href="~/About Us.aspx" runat="server">ABOUT US</a> <a href="~/Contact.aspx" runat="server">CONTACT</a></span>
</div>
<div class="main">
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="clear">
</div>
<br /><br />
<div class = "footer">
<a href="Privacy.aspx">Privacy Policy</a> <a href="Terms.aspx">Terms of Use</a> <br />
Copyright @ 2017 All Rights Reserved.
</div >
</div>
</body>
&#13;
答案 0 :(得分:0)
将topnav高度设置为auto
或适合您的任何内容。将其设置为50px是个问题。
#topnav {
height:auto;
width:100%;
position: relative;
display:inline-block;
font-size: 14pt;
background-color:black;
font-family:'Times New Roman', Times, serif;
overflow: hidden;
}
答案 1 :(得分:0)
你可以减少浮点数而不是它使用display:inline-block;并使用媒体查询在小尺寸屏幕上正确显示
#topnav {
overflow: auto;
}
@media only screen and (max-width: 768px){
#menu2{
background: red;
float: none;
width: 100%;
text-align: center;
}
}