調整窗口大小問題

由於我在解決問題時遇到問題，因此我被困在我的一個學校項目中。每當我調整我的窗口的大小時，菜單就會崩潰。我正在分享截圖和我的腳本。調整窗口大小問題

這期間最大化窗口視圖：

這發生時，我儘量減少我的所有菜單選項下山時我調整窗口：

我我正在與我的這個頁面的腳本共享，但它發生在所有頁面上。請檢查下面的腳本：

#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

調整窗口大小問題

回答

相關問題