css - 如何将带有列表元素符号图像的 CSS 列拆分到自己的列中

Question

使用 CSS 列时，图像元素符号部分显示在两个列中。有什么想法可以让元素符号图像在列断开时保留在它们自己的列中吗？

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

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

我能让它正常工作的唯一方法是减小图像的大小或增加 li 元素之间的边距。我需要元素符号的大小(宽度:42 像素，高度:40 像素)以匹配设计师的合成图。

下面是我正在处理的内容的简单复制。

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 来说是本地的，可能会导致一些麻烦。