Question

我想创建一个无序列表，列表项包含图像和旁边的项目符号。如果我创建背景图像作为实现此目的的方式，图像将出现在文本后面。如果我将图像设置为列表样式图像，它就不会与文本对齐并且它会夺走我想要的子弹。这是我的列表风格图像的代码，我将附加一个图像，但由于我是新手来实现这一目标，我还没有足够的分数。任何帮助将不胜感激！

谢谢！

.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>

Answer 1

这就是我用于同样问题的原因：

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

不是使用不能正确对齐的图像，而是决定将其用作背景，而不是重复它。玩弄填充物和高度，直到它符合您的要求！

Jsfiddle if you're interested

编辑：只是读到你想保留子弹。带走list-style: none，你就可以了。

Answer 2

这是显示图像和子弹的另一种方式。

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

}

检查 DEMO 。

图像与无序列表项旁边的问题

2 个答案: