Css 将导航栏中的内联元素分组为两个组，并防止在组内换行

我是新来的，所以我不知道这是否可能，搜索网站和互联网是相当徒劳的

我有一个水平导航栏，上面有五幅图像，当窗口缩小时，它们会像预期的那样自动换行。我想做的是防止前三项在它们之间缠绕，也防止后两项在它们之间缠绕。基本上，当窗口变得足够小时，最后两个项目应该包裹在前三个项目下，就这样。其他任何东西都不应以任何其他方式包装

一幅画能表达千言万语：

这就是我的情况：

<style>

#nav {
display: block;
list-style: none;
}

#nav ul {
margin: 0;
padding: 0;
border: 0;
}

#nav li {
display: inline;
text-align:center;
list-style-type: none;
margin-left: auto;
 margin-right: auto;
}

#nav img {  
display: inline;
text-decoration: none;
padding-left: 0%;
padding-right: 0%;
vertical-align: top;
margin-left: 45px;
margin-right: 45px;
}

</style>



<div id="nav">
<ul>
<li id="i1"><img src="images/minu-about-blue.png" width="141" height="36" />
<li id="i2"><img src="images/menu-mixes-blue.png" width="130" height="36" />
<li id="i3"><img src="images/menu-guestbook-blue.png" width="250" height="36" />
<li id="i4"><img src="images/menu-links-blue.png" width="125" height="36" />
<li id="i5"><img src="images/menu-other-blue.png" width="137" height="36" />
</ul>
</div>

---

我认为这是不可能做到的，除非你把它分成两组，一组用于第一组3，一组用于第二组。你需要使用媒体查询来检测屏幕，并调整每个图像的边距，以获得所需的结果

像这样的

@media (max-width: 600px) {
#nav img {  
margin-left: 85px;
margin-right: 85px;
}
}

---

这是一个非常笼统的回答，针对一个非常笼统的问题。我当然会学习响应式CSS。

刚刚试用过，完全可以满足我当前的需要，谢谢。看起来有点“不合适”，但它是有效的。我才刚刚开始，我的主要目标是按照我心目中的布局发布我的网站，或者只要美观就足够近。当我获得更多的知识时，我当然会进一步研究，并且可能更恰当地重新编码它，因为我获得更多的知识，甚至在从我获得更多经验之后，在一个流体网格基础上。我想这就是你的想法，查看源代码以查看代码。谢谢，它们的包装方式与我的想法相同，是的，但是图像的宽度并不都相同，应该保持其原始宽度，尽管浏览器调整大小，这会拉伸图像。此外，还为整个容器设置了某种最大宽度设置，使其在到达调整大小的屏幕边缘之前进行包裹。

@media (max-width: 600px) {
#nav img {  
margin-left: 85px;
margin-right: 85px;
}
}