文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML元素的CSS重新排序和重新定位

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

Stack Overflow用户

提问于 2020-04-14 18:39:04

回答 1查看 85关注 0票数 0

我有一个要求，改变移动版本的特定菜单。桌面版本有六个菜单项被平放在一行中，如下所示：

one two three four five six.

现在，对于移动版本，布局应该是：

one five six
two
three
four

我尝试将display: flex;应用于菜单的ul元素，然后将顺序应用于菜单项。但是，我似乎无法通过，因为我无法将display: block;应用于il项2、3和4。

我尝试了另一种应用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

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-14 19:02:54

您可以在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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61214873

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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