Question

对于我的ul列表项，我使用list-style-image属性添加了一张图片。

我拥有的例子： JSFiddle

＆＃13;

ul {
  list-style-image: url('http://placehold.it/50x40');
}

＆＃13;

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

＆＃13;

我希望{{1>}项目中的文字（例如＆＃34;咖啡＆＃34;）触摸图片 - 列表项目图片与其描述之间没有差距

Answer 1

一种解决方案是删除列表样式并通过伪类li

在:before元素之前添加图像

＆＃13;

ul {
  list-style: none;
}

ul li:before {
  content: url(http://placehold.it/50x40);  
  display: inline-block;   
  vertical-align: middle;
}

＆＃13;

<ul>
  <li>Coffee</li>
  <li>Tee</li>
  <li>Cola</li>
</ul>

＆＃13;

Answer 2

您似乎无法直接控制list-style-image（或bullet）与li内容之间的空间。

为了实现这一目标，您可以将图像用作背景

li {
  list-style-type: none;
  background-image: url('http://placehold.it/50x40');
  background-repeat: no-repeat;
  background-size: 15px 15px;
  padding-left: 15px;
}

https://jsfiddle.net/gd2rtb70/

您还可以查看this answer here

Answer 3

你必须制作CSS技巧才能得到这个。

使用

background: url();

而不是

list-style-image

这个属性看小提琴link

Answer 4

您可以将每个<li>的内容包装在<span>中，然后相应地定位该范围：

<li><span>Coffee</span></li>

然后：

li span {
  position: relative;
  left: -7px;
}

https://jsfiddle.net/ndpr9tnr/

Answer 5

我认为你不能用list-style-image做到这一点。您需要创建一个假的列表样式。像这样：

ul {
    list-style:none;
}

li:before {
  content:"";
  background: url('http://placehold.it/50x40');
  width: 50px;
  display: inline-block;
  height: 40px;
}

在这里演示：https://jsfiddle.net/9qnmxpjh/6/

Answer 6

即使你已经接受了答案，我觉得它要比它需要的复杂得多。

假设您不关心IE8或更低，我建议：

＆＃13;

ul {
  list-style-image: url('http://placehold.it/50x40');
}
li {
  text-indent: -7px; /* also works when solely applied to the <ul> */
}

＆＃13;

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

＆＃13;

CSS删除文本和列表样式图像之间的差距

6 个答案: