将最后两个元素包裹在一起

Question

我有一个动态生成的 UL/LI 列表，其中包含可变数量的元素，水平显示。我想设置 CSS，以便在需要换行时，列表中的最后两个元素始终换行在一起。

标记：

<ul>
<li>A</li>
<li>B</li>
...
</ul>

输出

<ul>
<li>A</li>
<li>B</li>
...
</ul>

列表使用的空间是响应式的，并且元素是动态的，因此固定宽度没有任何帮助。我无法控制标记，因为它来自 CMS。我的列表项当前是浮动的，但更改为 flex 或 inline-block 就可以了。

这在纯 CSS 中可能吗？

Answer 1

这在 CSS 中是可能的。

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

小提琴示例

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