Question

如果我有一个像

这样的清单

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

我怎么能让它显示水平显示前两个项目和接下来的三个项目，但是它们之间的第二行呢？

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

Answer 1

使用Flexbox（css）可以实现这一目标。使用此解决方案，它取决于第一行显示的元素数量。例如，如果要在第一行显示元素，则将100除以4，得到25，宽度为25％; 以下是三个样本。我希望这有帮助

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用column-count: 2;上的ul创建两个列，其中列表将均匀分布到其中：

ul {
column-count: 2;
}

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

Answer 3

我猜你可以用一张桌子。使用行跨度和col-span来帮助您进行对齐

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

3 个答案: