Html 动态地使垂直导航栏在屏幕上变为水平调整大小

我正在尝试创建一个动态导航栏。默认情况下，我希望导航栏垂直显示在横跨页面整个高度的div中，但调整大小后，我希望导航栏变为水平。以下是我努力实现的目标：

我试图通过添加

display:block到我的
ul
但它不会改变任何东西。我对媒体查询的理解不是最好的，但我也尝试改变左div（深灰色）的宽度和高度：

实现这一目标的最佳方法是什么

编辑：


html，
身体{
身高：100%；
背景色：#fff；
}
身体{
背景色：#fff；
文本对齐：居中；
保证金：0；
字体系列：“Helvetica Neue”，Arial，无衬线；
字号：1rem；
字体大小：400；
线高：1.5；
显示：块；
}
.网站包装{
显示：表格；
宽度：100%；
身高：100%；
最小高度：100%；
-webkit盒阴影：插入0 0 5rem rgba（0,0,0,5）；
长方体阴影：插入0 0 5rem rgba（0,0,0,5）；
}
* {
保证金：0；
填充：0；
}
.网站包装{
显示器：flex；
柔性包装：包装；
}
.导航集装箱{
身高：100%；
宽度：200px；
背景色：#333；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.标志架{
位置：绝对位置；
排名：0；
文本对齐：居中；
}
.商标架{
高度：自动；
}
#导航组{
利润上限：-300px；
宽度：100%；
}
李丽娜先生{
显示：块；
}
.导航链路{
宽度：100%；
显示：块；
文本对齐：左对齐；
颜色：#fff；
文字装饰：无；
左边距：0px；
左侧填充：15px；
}
.导航链接：悬停{
背景色：#fff；
颜色：#333；
}
美国海军{
宽度：100%；
左侧填充：0px；
}
李国荣先生{
列表样式类型：无；
宽度：100%；
}
李丽娜先生{
文本对齐：左对齐；
填充物：5px；
颜色：#fff；
文字装饰：无；
左边距：15px；
}
李海军：悬停{
背景色：#fff；
}
李海军：悬停在a上{
颜色：#333；
}
@媒体屏幕和屏幕（最大宽度：540像素）{
.导航集装箱{
宽度：100%；
高度：160px；
背景色：#333；
边框底部：0.5px实心#333；
}
.导航集装箱导航，
.nav集装箱nav ul，
.nav集装箱nav ul li，
.标志架{
显示：内联；
}
.标志架{
位置：绝对位置；
左：0；
}
#导航组{
浮动：左；
}
}



首先，您的媒体查询可能根本不会被调用，因为最大宽度在200px时非常小

在媒体查询中，您需要将导航元素和徽标的“显示”属性设置为“内联”，以便它们并排显示。（也可以考虑使用Frasbox进行此操作），还需要重置一些定义得更高的属性，比如H3徽标元素的行高。

@media screen and (max-width: 480px) {
  .nav-container{
      width: 100%;
      height: auto;
      background-color: #333;
      border-bottom: 0.5px solid #333;
   }
  .nav-container nav,
  .nav-container nav ul,
  .nav-container nav ul li,
  .logo-holder,
  .logo-holder h3 {
      display: inline;
  }
  .logo-holder h3 {
      line-height: 1;
  }
}

在您的方法中，没有媒体查询。只需从代码中添加媒体查询+float:none；寻求代码帮助的问题必须包含在问题中复制代码所需的最短代码，最好是在a中。嘿，Andrea，谢谢你的回答。我已经根据您的方法设计了代码，但是导航链接似乎没有出现。你可以看看我编辑的问题，看看我在哪里错误地实现了你的方法吗？嗨，Freddy，你似乎在你的代码中使用了很多布局技术（浮动、flexbox、不同的显示值），如果你只使用一种，就可以更容易地跟踪所有东西是如何协同工作的。你看不到导航链接的原因是#navigation div的上边距为-300px，因此它位于屏幕顶部上方。您使用的是Chrome开发工具还是类似的工具？如果没有，我强烈推荐！它使您更容易了解您的元素发生了什么。一个jsbin，对你的代码有一些评论，希望有用嘿，Andrea，谢谢你的帮助！这些评论对帮助我理解我自己造成的问题非常有用。我要说的是，多亏了你，我的导航栏现在可以正常工作了！：）
@media screen and (max-width: 480px) {
  .nav-container{
      width: 100%;
      height: auto;
      background-color: #333;
      border-bottom: 0.5px solid #333;
   }
  .nav-container nav,
  .nav-container nav ul,
  .nav-container nav ul li,
  .logo-holder,
  .logo-holder h3 {
      display: inline;
  }
  .logo-holder h3 {
      line-height: 1;
  }
}