Html 导航栏未正确缩放

我试图使我的导航栏，以便当屏幕大小减少，它平均显示每行4个链接

这里是全宽的

然而，当缩小窗口的大小时，它似乎会将每个链接单独向下推，这很混乱（见下图）

这是密码

nav{
背景色：#D6；
}
导航ul{
利润率：0.2%0；
填充：10px；
}
李国荣{
显示：内联；
保证金：0；
宽度：25%；
}
海军ulli a{
文字装饰：无；
}
nav ul li a：不是（最后一个孩子）{
右边框：1px实心#9191；
填充：0 10px 0 10px；
}

以下是使用
flexbox
和
@media
查询的答案。正如你的问题所说的那样，在你添加更多的链接时可能会有更好的解决方案，因为你的菜单在屏幕宽度低于平板大小（~768 px）之前没有包装，你可以考虑添加一个汉堡包样式的菜单直到桌面（~~（99）2px）。

*{
框大小：边框框；
}
导航{
背景色：#D6；
}
导航ul{
利润率：0.2%0；
填充：10px；
}
李国荣{
显示器：flex；
柔性包装：包装；
保证金：0；
}
海军ulli a{
文字装饰：无；
显示：内联flex；
弹性：125%；
位置：相对位置；
填充：0 10px；
}
nav ul li a:不是（：第n个孩子（4n+4））：：之后{
内容：''；
身高：100%；
宽度：1px；
背景色：黑色；
位置：绝对位置；
排名：0；
右：0；
显示：块；
}
@介质（最小宽度：768px）{
李国荣{
柔性包装：nowrap；
}
海军ulli a{
flex:0自动；
}
不（最后一个孩子）：：之后{
内容：''；
身高：100%；
宽度：1px；
背景色：黑色；
位置：绝对位置；
排名：0；
右：0；
显示：块；
}
}





有很多方法可以解决这个问题，但我的问题是，为什么要平均显示4个链接？如果链接变成9或其他数字会发生什么情况，您计划如何均匀地显示这些链接？您有3个选项，使用JS计算链接的宽度，并尝试在每一行上容纳4个（或x个数字）。或者将每4个链接包装到另一个父元素中，以便父元素下一行。或者让你的css响应，在达到一定的最小宽度后，使链接消失，并显示一个汉堡菜单。如果你真的想要一个我能提供的解决方案，我只是觉得你的理论不是一个理想的解决方案。我只是按照一个在线教程。在每行上有4个链接，通过保持平衡看起来更好。当你说保持css响应时，你的意思是保持它当前的状态吗？