html - HTML + CSS Thumbnail help - 仅定位缩略图

Question

所以基本上我正在尝试在我的网站上添加自定义缩略图。我<ol>在css中使用它并对其进行样式设置，例如..

ol {
    counter-reset: none;         
    margin: 0px;         
    padding: 0px;       
    list-style-image: url('{image:thumbNail}');      
    position: relative;     
    right: 20px;     
}

但我想在不影响我在<ol>. 我怎样才能做到这一点，所以我不影响文本，而只是定位缩略图？帮助将不胜感激。

Answer 1

这是一个小提琴：http: //jsfiddle.net/enn5r/

<ol class="thumnails">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

---

ol.thumbnails li{
  padding:5px 0px 5px 25px;
  border-bottom:1px solid #DDD;
  background:transparent url(/icons/clock.png) no-repeat 5px 7px;
  }

Answer 2

您应该删除position:relative;以ol列出并给出它并使用和CSS 属性position:absolute;对齐它。但是如果应用了父标签，这一切都会正常工作。您也可以使用它来工作，但这不是正确的方法，因为它会在不同的屏幕分辨率上移动元素。lefttopolposition:relative;position:relative;