Html 图像位于无序列表项旁边的问题

我想创建一个无序列表，列表项旁边有图像和项目符号。如果我创建一个背景图像作为实现这一点的方法，那么图像就会出现在文本后面。如果我将图像设置为列表样式的图像，它不会与文本对齐，而是带走了我想要的项目符号。这是我的列表样式图像的代码，我打算附加一个图像，但我还没有足够的点数，因为我是新手。任何帮助都将不胜感激

谢谢

.ul1
    {
        margin-left: 25px;

        list-style-image: url('Images/Air Icon copy.png');

    }

 <div>
   <ul id="Ul1">
     <li class="ul1">Clean air:  Our emissions are 250 percent lower.</li>
   </ul>
 </div>

---

这就是我用来解决你同样问题的方法：

list-style: none;
background: url('something.png') 0 0 no-repeat;
padding: 0 0 0 30px;
height: 30px;

我决定用它作为背景，而不是使用不能正确对齐的图像，只是不重复而已。玩弄填充物和高度，直到它符合你想要的

---

编辑：只是读到你想保留子弹。去掉列表样式：无，你就可以开始了。

这里是显示图像和项目符号的另一种方式

.ul1
 { 
   left:12px;
 /* list-style-type:none;*/
 }
li{position:relative;}
li.ul1:before {
    content: "";
    content: url(http://lorempixel.com/20/20/);
    margin:10px 0;

}

---

检查。

你能发布一个工作的JSFIDLE.net吗？不要将其设置为图像，将“无”设置为图像样式，使用“背景”和“重复无”，提供一些良好的填充，并使用“垂直对齐”。我也有同样的问题