如何将列表项文本和列表项图像放在同一行？ [英] how to put list item text and list item image in same line?

问题描述

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>

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

I am trying to put image as bullet in list item but the issue is image and list item text is not in same line.

此处的输出屏幕截图

图像链接（图像为16px X 16px）

image link (images is 16px X 16px)

推荐答案

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

You can use it as a pseudo element and you will have better control on the position and also the size:

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>

这篇关于如何将列表项文本和列表项图像放在同一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！