保持最后两个元素包装在一起

Question

我有一个动态生成的UL / LI列表，其中包含可变数量的元素，水平显示。我想设置我的CSS，以便在需要包装时，列表中的最后两个元素总是包装在一起。 标记： ＆LT; UL＆GT; ＆LT;李＆gt;一种与LT; /锂＆GT; ＆LT;李＆GT; B＆LT; /锂＆GT; ... ＆LT; / UL＆GT; 产量 当有足够的空间时，在一行中显示： A B C D E F G. 当更短时，首先打破这样的： A B C D E F G. 这也很好： A B C D E F G. 从来没有这个： A B C D E F. G 列表使用的空间是响应的，元素是动态的，因此没有固定宽度会有所帮助。我无法控制标记，因为它来自CMS。我的列表项目当前已浮动，但更改为flex或inline-block是正常的。 这在纯CSS中是否可行？

Answer 1

这可以在CSS中使用。

1. 将ul的最小宽度设置为等于最后两个元素所需的空间。
2. 将倒数第二个li的边距右侧设置为等于上一个li的宽度。
3. 将最后li的左边距设置为宽度的负数。

Example Fiddle

<强> CSS ：

ul {
  min-width: 4em;
}

li {
  float: left;
  width: 2em;
}

li:nth-last-of-type(2) {
  margin-right: 2em;
}

li:nth-last-of-type(1) {
  margin-left: -2em;
}

Answer 2

使用flex-wrap属性，它会自动调整间距。

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