Question

我很新，所以我不知道这是否可行，搜索网站和互联网是徒劳的。

我有一个水平导航栏，其中有五个图像在窗口大小减小时按预期换行。我想做的是防止前三个项目在它们之间进行包装，并防止最后两个项目在它们之间进行包装。基本上，当窗口变得足够小时，最后两个项目应该包裹在前三个项目之下，就是这样。没有别的东西可以用任何其他方式包裹。

一张图片说千言万语： http://i.imgur.com/PRb9hba.jpg

这是我的情况：

<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>

我有页面的主包装器也有以下属性，我知道它在某些情况下可能是相关的：

display: table;
table-layout: fixed;
position: absolute;

Answer 1

除非你把它分成两个<ul>组，一个用于第一组3个，一个用于2个组，我不相信这可以做到。

Answer 2

您将要使用媒体查询来检测屏幕并调整每个图像的边距以获得所需的结果。

像这样。

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

对于一个非常笼统的问题，这是一个非常普遍的答案。我当然会研究响应式CSS。

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

2 个答案: