代码之家 › 专栏 › 技术社区 › machineghost

列表样式图像(实际上)是不推荐的样式吗?

list css

0

machineghost · 技术社区 · 7 年前

我最近试着 list-style-image 把它的列表项文本排成一行,结果发现这基本上是不可能的,而且每个人都建议使用它 background-image 相反

这让我不禁要问:既然每个人似乎都在使用这种风格,那么这种风格还有存在的理由吗 背景图像 相反你能帮上什么忙吗 列表样式图像 其他方法都做不到(或者更容易做到)?或者,出于所有的意图和目的,这个标签现在被弃用了吗?

3 回复 | 直到 7 年前

1

Alohci 7 年前

这绝对不是不赞成的。但它的良好布局控制取决于浏览器实现 ::marker 伪元素,看起来,还有很长的路要走。

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

2

0

Omid Nikrah 7 年前

我认为最好的方法是使用 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>

3

0

machineghost 7 年前

list-style-image . 虽然有几种变通方法可以获得类似的效果( background-image 或 ::before ::after 图像),没有一个真正使用 列表样式图像 他们都比我强 列表样式图像

还有一个CSS工作组建议 ::marker 也许有一天,如果它真的被批准了 列表样式图像 有重新存在的理由。

但是现在没有任何理由(或者至少在这里没有给出任何理由)说明任何开发人员应该使用 列表样式图像 . 虽然它在技术上没有被否决,但从所有的意图和目的来看,它似乎都被有效地否决了。