css - 如何在中间打破无序列表？

Question

如果我有一个列表

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

我怎样才能让它水平显示前两个元素和接下来的三个元素，但在它们之间插入第二行？

编辑:正在寻找 CSS 解决方案，因此我可以根据视口(viewport)大小选择是否执行此操作。

Answer 1

使用 Flexbox(css) 你可以做到这一点。使用此解决方案，它取决于在第一行显示多少个元素。例如，如果您希望元素显示在第一行，您可以将 100 除以 4，得到 25，宽度为 25%； 下面是三个示例。希望对您有所帮助

ul {
  display: flex;
  flex-wrap: wrap;
  border: 1px red solid;
}
li {
  width: 33.33%;
}

ul+ul{
  width: 100px;
}
ul+ul li {
  width: 50%;

}
ul+ul li:nth-last-of-type(-n+3) {
  width: 33.33%;
}

ul + ul + ul {
  display: flex;
  flex-wrap: wrap;
  border: 1px red solid;
  width: 150px;
}
ul + ul + ul li:nth-of-type(2) {
  width: 50%
}
ul + ul + ul li {
  width: 33.33%;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>