Question

我需要为移动版本更改某些菜单。台式机版本有六个菜单项，它们单行排列，如：

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

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

CSS对HTML元素的重新排序和重新定位

1 个答案: