Question

我在bootstrap popover中创建了一个帐户列表，我在<li>标记中创建了一个<ul>元素。

var t = ul.append($(document.createElement('li')).text('Test Account'));

我希望在每个<li>元素之前添加一个图像，如下所示：

enter image description here

我列出了帐户名称，我想在帐户文本（绿色图标）之前添加图片。关于如何实现这一目标的任何想法？

Answer 1

我要做的是：View code here via JSFiddle。我只是抓住了我在Google图片上找到的蓝色图标，但当然，你可以使用你喜欢的任何图像。

ul li {
   list-style-type: none; // this removes the default li bullet so you can use your own custom image
   background-image: url('images/bullet_image.png');
   background-repeat: no-repeat;
   background-position: top left;
   padding-left: 30px; // Use as many pixels as you need to provide enough space between the image and the text.
}

好的，所以第二个代码块会添加新自定义项目符号点的背景图像，或者在LI左侧添加新图像。因此，这会将图像放在前两个或三个字母的后面以及填充左边的内容：30px会将其移动到左侧，并为图像提供空间，而不会将文本重叠到其上。

我已经开发了数百个网站，出于某种原因，这种技术最适合将图像放置在你的左侧，也就是自定义列表样式图像，但是更精确地执行图像放置。

Answer 2

您可以将图像放在li标签内，就像这个例子一样

<html>
<body>

<h4>list and images</h4>
<ul>
<li><img src="coffee.jpg" height="15px" weight = "15px" /> &nbsp; Coffee</li>
<li><img src="Tea.jpg" height="15px" weight = "15px" /> &nbsp; Tea</li>
<li><img src="milk.jpg" height="15px" weight = "15px" /> &nbsp; Milk</li>
</ul>

</body>
</html>

注意：您可以更改图像的高度和宽度，图像也应与html文件位于同一文件中。否则，您必须在图像源中包含路径。

如何在<li>列表</li>之前创建图像元素

2 个答案: