使用CSS和HTML在媒体响应中一个接一个地显示菜单项

我有一个项目列表，并且在介质分辨率为768px时使用了切换。列表在一列中出现，现在我将它显示在一行中。由于我的菜单中有5个列表，我希望两个列表以360px分辨率和640px分辨率显示在一行中，一行中可以显示4个项目。因此，基于分辨率宽度，它必须将列表放在一行中，其余部分作为下拉行

.左侧ul：第一个孩子李a{ 显示：内联块； 填充：20px 62px； 颜色：红色； 光标：指针； 字体系列：segoeuib； 字体大小：16px； } .左侧ul{ 边际：0px； } .左侧ul:第一个子li a:悬停，.nav>li>a:聚焦，.nav>li>a:悬停{ 颜色：b755ff！重要； 背景色：白色！重要； } a:悬停{ 左边距：9px； } @仅介质屏幕和最大宽度：768px{ .菜单{ 显示器：flex； 弯曲方向：行； } 插入符号箭头{ 利润上限：-40px； 左边距：58px； } } 您必须根据需要将flex basis属性设置为菜单>li。试试下面的css

堆栈片段

.nav.navbar-nav.menu{ 列表样式：无； 填充：0； } @仅介质屏幕，最大宽度：640像素{ .菜单{ 显示器：flex； 柔性包装：包装； } 李先生{ 弹性基准：25%； 文本对齐：居中； } } @仅介质屏幕和最大宽度：360px{ .菜单{ 显示器：flex； 柔性包装：包装； } 李先生{ 弹性基准：50%； 文本对齐：居中； } }

---

您在介质中添加的Flex仍然不起作用？它将连续出现，但我需要根据分辨率的宽度来使用Flex wrap:wrap；是的，谢谢你，它工作了谢谢你的回复，它是根据我的要求工作的。我还有一个疑问，那就是这张菜单上的每一个项目。在media@768px和更低的版本中，我得到了切换，所以它工作得很好，但在这个分辨率之上，我正在努力解决头部满的问题。你能帮忙吗me@Bhrungarajni我将建议您发布另一个问题，其中包含最少且完整的问题代码。在这里很难解决你的其他问题。我希望你能理解……我已经在这里发布了：