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

【问题标题】：HTML + CSS Thumbnail help - Positioning the thumbnail onlyHTML + CSS Thumbnail help - 仅定位缩略图
【发布时间】：2012-09-04 04:20:19
【问题描述】：

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

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

但我想在不影响<ol> 中的其他文本的情况下定位它。我怎样才能做到这一点，所以我不影响文本，而只是定位缩略图？感谢您的帮助。

【问题讨论】：

不要使用list-style-image，在<li> 上加上padding-left 并将此图像作为background-image of li>。 list-style-image 没有那么灵活。

标签： html css positioning thumbnails

【解决方案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;
  }

【讨论】：

非常感谢您的帮助！我有这个问题有一段时间并放弃了，但找到了这个网站，现在它已经排序。非常感谢！！！！！！！！！
如果您对此答案感到满意，请将其标记为正确。

【解决方案2】：

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

【讨论】：