Html 调整窗口大小问题

我被学校的一个项目困住了，因为我在解决它时遇到了困难。 每当我调整窗口大小时，菜单就会折叠。我正在分享截图和我的脚本

这是在最大化窗口视图期间：

当我最小化所有菜单选项时，当我调整窗口大小时，会出现这种情况：

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

#topnav{
高度：50px；
宽度：100%；
位置：相对位置；
显示：内联块；
字号：14pt；
背景色：黑色；
字体系列：'Times New Roman'，Times，衬线；
溢出：隐藏；
}
#菜单1{
左边距：120像素；
边缘顶部：10px；
显示：块；
浮动：左；
颜色：突出显示；
溢出：隐藏；
}
#菜单1 a{
颜色：突出显示；
文字装饰：无；
}
#菜单2{
边缘顶部：10px；
右边距：120px；
显示：块；
浮动：对；
颜色：白色；
位置：相对位置；
}
#菜单2 a{
颜色：白色；
文字装饰：无；
}
#菜单2 a：悬停{
颜色：突出显示；
}
梅因先生{
最小高度：850px；
高度：自动；
宽度：100%；
保证金：0自动-142px；
显示：内联块；
位置：相对位置；
}
.清楚{
高度：100px；
}
.页脚{
高度：50px；
宽度：100%；
颜色：白色；
文本对齐：左对齐；
显示：块；
底部：-1px！重要；
左：0；
背景色：黑色；
z指数：-1；
位置：第页；
}
.页脚a{
颜色：矢车菊蓝；
文字装饰：无；
}
#包装纸{
左边距：自动；
右边距：自动；
宽度：100%；
}

版权@2017保留所有权利。

将顶部导航高度设置为

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;


}

---

将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;


}

---

您可以减少浮动，而不是使用display:inline块；并使用媒体查询在小屏幕上正确显示

#topnav {
    overflow: auto;
}

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

---

签出此代码笔

您可以减少浮动，而不是使用显示：内联块；并使用媒体查询在小屏幕上正确显示

#topnav {
    overflow: auto;
}

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

---

签出此代码笔

此代码工作正常，但在调整窗口大小时仍有问题文本不会停留在那里，而是在调整大小时移动。我想要的是，它应该在调整大小时移动到一定程度，但之后它应该保持固定在特定位置，人们可以滚动使用这些菜单按钮。我不确定我是否完全理解你的意思，但如果我理解了，然后尝试处理

min height

和媒体查询。此代码有效，但在调整窗口大小时仍有问题文本不会停留在那里，而是在调整大小时移动。我想要的是，在调整大小时，它应该移动到一定程度，但之后它应该保持固定在特定位置，并且可以滚动使用这些菜单按钮。我不确定我是否完全理解你的意思，但如果我理解了，那么试着处理

最小高度

和媒体查询。