调整窗口大小问题

由于我在解决问题时遇到问题，因此我被困在我的一个学校项目中。每当我调整我的窗口的大小时，菜单就会崩溃。我正在分享截图和我的脚本。调整窗口大小问题

这期间最大化窗口视图：

这发生时，我尽量减少我的所有菜单选项下山时我调整窗口：

我我正在与我的这个页面的脚本共享，但它发生在所有页面上。请检查下面的脚本：

#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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="~/Groups.aspx" runat="server">APPLY FOR GROUPS</a> 
 
         </span> 
 
         <span id="menu2"> 
 
          <a href="Home.aspx" runat="server">HOME</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="~/About Us.aspx" runat="server">ABOUT US</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>

来源

2017-08-14 Amneet

设置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; 


}

来源

2017-08-14 15:20:30 Klajdi

此代码的工作，但还是有问题，当我调整窗口大小的文本不留在那边，但移动，同时调整。我正在寻找的是，它应该在调整大小的同时进行一定程度的调整，但稍后它应该保持固定在某个位置，并且可以滚动以使用这些菜单按钮。 – Amneet

林不知道我完全理解你的意思，但如果我这样做，然后尝试搞'最小高度'和媒体查询。 – Klajdi

你可以减少花车而不是使用display：inline-block;和使用媒体查询用于显示得当小型屏幕上

#topnav { 
    overflow: auto; 
} 

@media only screen and (max-width: 768px){ 
    #menu2{ 
    background: red; 
    float: none; 
    width: 100%; 
    text-align: center; 
    } 
}

结帐这个codepen https://codepen.io/anon/pen/vJeWbd?editors=1100

来源

2017-08-14 15:33:19

调整窗口大小问题

回答

相关问题