无法将图像添加到列中的无序列表项

Question

我让这两个工作独立，但我不能让它们一起工作，我只是想不出原因。

我需要在页面上实现两件事：   - 3列中的无序项目列表（有很多列表项目要列出）   - 每个列表项前面都有一个复选框。

我设法实现了列视图，并设法在每个列表项前面实现了图标。但我不能让他们一起工作。

我正在测试jsfiddle：http://jsfiddle.net/glee/Fa722/

这是HTML

 <div class="licol">    
 <ul id="ul.TickList">
 <li>apples</li>
 <li>pears</li>
 <li>bananas</li>
 <li>grapes</li>
 </ul></div>
 <div class="licol">    
 <ul>
 <li>cheese</li>
 <li>milk</li>
 <li>cookies</li>
 <li>oreos</li>
 </ul></div>
 <div class="licol">    
 <ul>
 <li>apricot</li>
 <li>cherries</li>
 <li>oranges</li>
 <li>pineapple</li>
 </ul></div>

和CSS。

ul.TickList {
   list-style-image:url(http://simplyelegant.us.tempcloudsite.com/images/icons/small_icons/16px-bluecheck-icon.png);
      width: 700px;
    list-style-type:none;
}

.licol {
    float: left;
    width: 140px;
}

非常感谢你！

Answer 1

你的HTML应该只是这个：

<ul id="TickList">
<!-- Content -->
</ul>

你的css电话应该是：

#TickList li {
position: relative;
left: 20px;
list-style-type:circle;
list-style-image:url('http://simplyelegant.us.tempcloudsite.com/images/icons/small_icons/16px-bluecheck-icon.png');
}