css - 在无序列表中插入图像而不是项目符号

Question

我有以下代码：

     <div class="extra-details">
                               <ul class="browse-product-usp">

                               <li>
                                <span class="text">
                                    Dimension: 11x11 inch
                                </span>
                              </li>

                            <li>
                                <span class="text">
                                    Paper Depth: 285 gsm
                                </span>
                            </li>

                    </ul>
            </div>

这在浏览器中如下所示：

我的CSS如下：

    .text {
              color:#333;
              font-family: Helvetica, Arial, sans-serif;

  }

当我输入以下代码时：

    ul{list-style-image:url(../img/arrow.png);}

它从 iimage 行扭曲了我的文本。请帮助

我希望箭头和文本在同一行。

Answer 1

试试这个;

ul {
    list-style-image:url('image.gif');
}

Answer 2

您可以使用background: url("image.gif") no-repeat scroll 0px 5px transparent;而不是 list-style-image

Answer 3

习惯于在background-image您的li标签中

ul li {
background:url("http://cdn1.iconfinder.com/data/icons/silk2/resultset_next.png") no-repeat 0 3px;
line-height:25px;   
padding-left:25px;
}

演示