我需要更改移動版本的某個菜單。桌面版本有六個菜單項，排列成一排，如下所示：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 關注
- 160 瀏覽
添加回答
舉報
0/150
提交
取消