我需要更改移动版本的某个菜单。桌面版本有六个菜单项，排列成一排，如下所示：one two three four five six.现在，对于移动版本，布局应该是：one five six
two
three
four我尝试将 display: flex; 应用于菜单的 ul 元素，然后将顺序应用于菜单项。但是，我似乎无法通过，因为我无法将display: block;应用于il项目二、三和四。我尝试了另一种应用方式display: box;。让我展示一下这部分几乎给了我一个解决方案：#menu { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;}ul { list-style: none; } #menu-1 { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; box-ordinal-group: 1;} #menu-2 { -webkit-box-ordinal-group: 4; -moz-box-ordinal-group: 4; box-ordinal-group: 4;} #menu-3 { -webkit-box-ordinal-group: 5; -moz-box-ordinal-group: 5; box-ordinal-group: 5;} #menu-4 { -webkit-box-ordinal-group: 6; -moz-box-ordinal-group: 6; box-ordinal-group: 6;} #menu-5 { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; box-ordinal-group: 2;} #menu-5 { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; box-ordinal-group: 3;}#menu-1, #menu-5, #menu-6 { color: blue; display: inline-block;}#menu-2, #menu-3, #menu-4 { color: red; display: block;}<body> <div class="menu-container"> <ul id="menu"> <li id="menu-1">one</li> <li id="menu-2">two</li> <li id="menu-3">three</li> <li id="menu-4">four</li> <li id="menu-5">five</li> <li id="menu-6">six</li> </ul> </div> </body></html>如果我能将 one 项目与项目 five 和 six。我尝试了浮动，但这样项目one就消失了。所以我问你：“有没有办法将所有三个元素连接到一行中？JSFiddle
1 回答
交互式爱情
TA贡献1712条经验 获得超3个赞
您可以在 Flexbox 和 CSS 网格之间进行更改
Flexbox 不允许我们将项目放置在特定位置，但 CSS 网格可以。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style: none;
display: flex;
}
li {
border: 1px solid;
padding: 10px;
}
/* mobile media */
@media (max-width: 600px) {
ul {
display: inline-grid;
}
li:nth-child(3) {
grid-column: 1;
grid-row: 3;
}
li:nth-child(4) {
grid-column: 1;
grid-row: 4;
}
li:nth-child(5) {
grid-column: 2;
grid-row: 1;
}
li:nth-child(6) {
grid-column: 3;
grid-row: 1;
}
}
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
如果您不介意在父级上设置固定高度，请使用伪元素进行 Flexbox 破解。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style: none;
display: flex;
}
li {
border: 1px solid;
padding: 10px;
}
/* mobile media */
@media (max-width: 600px) {
ul {
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
height: 160px;
}
ul:after {
content: '';
height: 100%;
}
li:nth-child(6) {
order: 7
}
}
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
- 1 回答
- 0 关注
- 102 浏览
添加回答
举报
0/150
提交
取消