Question

我最近尝试将list-style-image与其列表项文本对齐，只是发现它实际上是不可能的，并且每个人都建议改用background-image。

这使我想知道：由于每个人似乎都改用background-image了，所以这种风格甚至不存在吗？您是否可以使用list-style-image做其他任何事情（或更简单地完成）呢？还是出于所有意图和目的现在不推荐使用该标记？

Answer 1

绝对不推荐使用。但是，对它的良好布局控制取决于浏览器实现And伪元素的情况，看来仍然是一个不错的选择。

请参见https://drafts.csswg.org/css-lists-3/#markers

Answer 2

我认为最好的方法是像下面这样使用before pseudo：

ul {
  list-style: none;
  margin: 0;
}
li {
  position: relative;
  padding: 10px 5px;
}
li::before {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  background-image: url(https://cdn.shopify.com/s/files/1/1061/1924/products/Sunglasses_Emoji_be26cc0a-eef9-49e5-8da2-169bb417cc0b_large.png?v=1480481057);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

<ul>
  <li>red</li>
  <li>blue</li>
  <li>green</li>
  <li>yellow</li>
</ul>

Answer 3

要回答我自己的问题，看来list-style-image没有有效的用例。尽管有几种变通办法可以达到类似的效果（background-image或::before / ::after图像），但它们都没有实际使用list-style-image，而且它们都比较出色（例如，他们给予list-style-image更大的控制权。

还有::marker的CSS工作组提案，有朝一日，如果确实得到批准，可以使list-style-image有再次存在的理由。

但是，到目前为止，没有任何理由（或至少没有在此处给出答案的理由）任何开发人员都应该使用list-style-image。尽管从技术上讲，它并没有被弃用，但从所有意图和目的来看，它似乎都已被弃用。

列表样式图像（实际上）是否已被弃用？

3 个答案: