如何将带有列表项目符号的图像的 CSS 列拆分为自己的列

Question

在使用 CSS 列时，图像项目符号会部分显示在两列中。任何想法如何让子弹图像在列中断时留在自己的列中？

尝试了其他堆栈溢出问题的一些答案，但这些都没有奏效。

-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
column-break-inside: avoid;

我可以让它正常工作的唯一方法是减小图像的大小或增加 li 元素之间的边距。我需要这个大小的子弹（宽度：42px，高度：40px）以匹配设计师的组合。

下面是我正在做的简单复制。

div {
  width: 50%;
  margin: 0 auto;
}

ul {
  list-style-type: none;

  columns: 2;
    column-gap: 4rem;
  line-height: 28px;
  margin:0;
  padding: 0;
}

li {
  font-size:21px;
  position: relative;
  margin-bottom: 2rem;
  padding-left: 4rem;
}

li::before {
  content: '';
  position: absolute;
  width: 42px;
  height: 40px;
  top: 0;
  left: 0;
  background-image: url(https://picsum.photos/42/40);
  border-radius: 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

<div>
  <ul>
      <li>Airy, open floor plans</li>
      <li>Sleek kitchens with stainless-steel appliances</li>
      <li>Brushed-nickel finishes and plank flooring in living area</li>
      <li>Carpeted bedroom</li>
      <li>Individual washer and dryer</li>
      <li>Exceptional Views</li>
      <li>Ceramic tiled baths</li>
      <li>Generous closet and storage space</li>
      <li>Loft style with spiral stairs and private roof access*</li>
  </ul>
</div>

这是 CodePen 的链接，您可以查看结果。

https://codepen.io/moxdev/pen/xxKObPP

Answer 1

不确定您所看到的确切内容（经验与预期的屏幕截图可能会有所帮助），但我看到的是图像似乎被列容器和其他列表项截断。

由于您有绝对定位的元素（图像项目符号），最好的办法是创建一个“local stacking context”。 堆叠上下文可能会变得很奇怪，但基本思想是您从全局堆叠顺序。这意味着其他元素不会干扰/重叠本地上下文中的子元素。

有几种方法可以强制本地上下文，但我认为在这种情况下，will-change 属性的负面影响最小。 （顺便说一句，这不是will-change property 的实际意图）

只需将其添加到 li 并查看它是否可以解决问题。

li {
  other: props;
  other: props;
  will-change: transform;
}

警告：

注意这一点，因为像 z-index 这样的东西现在是 li 本地的，可能会在以后引起一些麻烦。