HTML 元素的 CSS 重新排序和重新定位
我需要更改移动版本的某个菜单。桌面版本有六个菜单项，排列成一排，如下所示：
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就消失了。所以我问你：“有没有办法将所有三个元素连接到一行中？
翻过高山走不出你1回答
-
交互式爱情
您可以在 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>
随时随地看视频慕课网APP
相关分类
Html5