html - 将 li 元素显示在一个下一个

Question

我有两个ul元素，每个ul元素都有多个li元素。我希望li第二个的第一个元素ul正好在第一个li的第一个元素之下ul。同样，li两者的第二个元素ul应该正好在另一个之下。

这是演示 jsfiddle

如果有额外的li元素，我希望它在下一行，而不是在溢出的同一行中（例如li每个元素中的第四个元素ul）

我正在申请white-space: nowrap;，因为我不希望li元素进入下一行。

标签： htmlcss

Answer 1

您可以使用 Flexbox 轻松实现此目的。

ul {
  display: flex;
  flex-wrap: wrap;
}

ul:first-child {
  background-color: red;
}

ul:nth-child(2) {
  background-color: yellow;
}

li {
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  flex: 1 33%;
  border: 1px green solid;
}

这是小提琴：https ://jsfiddle.net/a632pxhf/1/