如何将列表项文本和列表项图像放在同一行？

Question

HTML：-

ul {
  list-style-image: url(https://i.stack.imgur.com/yGSp1.png);
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
</ul>

我正在尝试将图像作为项目符号放在列表项中，但问题是图像，并且列表项文本不在同一行。

screenshot of output here

image link（图片为16px X 16px）

Answer 1

您可以将其用作伪元素，这样可以更好地控制位置和大小：

ul {
  list-style:none;
}

li {
  position:relative;
}
li:before {
  content:"";
  position:absolute;
  top:2px;
  left:-20px;
  width:16px;
  height:16px;
  background:url(https://i.stack.imgur.com/yGSp1.png);
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
</ul>