Html 如何使导航按钮移动响应并按顺序折叠？

我用不同的方法尝试了数小时，使我的导航按钮能够响应移动，并以指定的垂直顺序折叠。我希望一旦屏幕缩小（约为500px），导航按钮在两个徽标下方的垂直列中折叠。如何修复代码以实现这一点

。容器流体{
边框：1px实心#000000；
最大宽度：1600px；
溢出：隐藏；
}
.包裹{
/*背景颜色：黄色*/
/*溢出：隐藏*/
}
.标志{
宽度：312px；
显示：内联块；
/*背景颜色：蓝色*/
}
/*
.标志img{
最大宽度：300px；
高度：自动；
}
*/
.导航一号{
显示：内联块；
/*背景颜色：绿色*/
浮动：对；
边缘顶部：25px；
}
导航{
字体：粗体11px“Helvetica Neue”，Helvetica，Arial，无衬线；
/*文本居中对齐*/
/*边框：1px纯绿色*/
/*溢出：隐藏*/
}
李先生{
显示：内联块；
}
.导航a{
背景：395870；
背景：线性梯度（#49708f，#293f50）；
右边框：1px实心rgba（0,0,0,3）；
颜色：#fff；
填充：12px 20px；
文字装饰：无；
}
.导航a:悬停{
背景#314b0；
盒影：嵌入0 10px 1px rgba（0,0,0,3）；
}
李：第一个孩子{
边界半径：4px 0 0 4px；
}
李：最后一个孩子{
右边界：0；
边界半径：0 4px 4px 0；
}
.第二排{
背景图片：url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg);
背景位置：绝对位置；
背景尺寸：封面；
背景重复：无重复；
最大宽度：100%；
高度：550px；
保证金：自动；
}
.浮球箱{
背景色：rgba（255、255、255、40）；
边界半径：10px；
/*不透明度：.45*/
最大宽度：75%；
高度：200px；
位置：绝对位置；
最高：50%；
左：0；
右：0；
保证金：自动；
溢出：隐藏；
}
.表格查询{
保证金：0自动；
文本对齐：居中；
字体：粗体13px无衬线；
最大宽度：325px；
位置：相对位置；
}
.表格搜索输入{
宽度：230px；
框大小：边框框；
边框左下半径：2px；
边框左上半径：2px；
背景色：#ffffff；
盒影：1px2px4p0RGBA（0,0,0,0.08）；
填充：14px 15px 14px 40px；
边框：1px实心#b6c3cd；
;
右边界：0；
颜色：4E565C；
大纲：无；
利润上限：70像素；
-webkit外观：无；
}
.表格搜索按钮{
边框右下半径：2px；
边框右上角半径：2px；
背景色：#6caee0；
盒影：1px2px4p0RGBA（0,0,0,0.08）；
颜色：#ffffff；
填充：15px 22px；
左边距：-4px；
光标：指针；
边界：无；
大纲：无；
}
.表格检索i{
位置：绝对位置；
顶部：15px；
左：20px；
字体大小：16px；
颜色：#80A3BD；
}
/*占位符颜色*/
.表单搜索输入：：-webkit输入占位符{
颜色：#879097；
}
.表单搜索输入：：-moz占位符{
颜色：#879097；
不透明度：1；
}
.表单搜索输入：-ms输入占位符{
颜色：#879097；
}
.nav.wrap.2{
显示：内联块；
文本对齐：居中；
宽度：100%；
边缘顶部：10px；
}

搜寻

CSS是关于自然的秩序、自然的位置、自然的风格。。。我的意思是你的代码不自然，你可以在这里看到：

.navigation li {
  display: inline-block;

}

.navigation a {
  padding: 12px 20px;
}

我想把重点放在这些属性上，因为这里我们要说：

你

），是的，你！即使你在他体内，你也会变得更大

在现实生活中，我们不能把更大的东西放到更小的空间里。在现实生活和CSS中发生的事情是：小东西变成大东西

因此，如果我们做出这种改变：

.navigation li {
  display: inline-block;
  padding: 12px 20px;
}

.navigation a {
  /* We changed who is bigger than who */
}

这需要一个自然的顺序（因为现在

.navigation a

的空间比他大）。最后的代码如下所示（当您使用手机时，此代码将自动换行）：

更多

我在玩的时候发现了一种很酷的方式，当屏幕很小的时候，我觉得这很酷：

@media all and (max-width: 500px){
    ul.navigation{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

此外，请记住，当您想要进行响应性设计时，您需要将meta:viewport插入html的头部：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

---

感谢您提供的精彩信息！非常感谢！它起作用了~

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">