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

时间:2012-12-05 10:55:43

标签: css

我有以下代码:

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

在浏览器中查看如下:

enter image description here

我的CSS如下:

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

  }

当我输入以下代码时:

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

它使我的文字从iimage行扭曲。请帮助 enter image description here

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

3 个答案:

答案 0 :(得分:5)

试试这个;

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

答案 1 :(得分:0)

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

答案 2 :(得分:-1)

已使用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;
}

Demo