Question

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

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

但我想在不影响我<ol>内其他文字的情况下定位。我怎么能实现这一点，所以我不影响文本，但只是定位缩略图？感谢帮助。

Answer 1

这是一个fidle：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列表并为其position:absolute;提供，并使用left和top CSS属性对齐。但是，如果ol的父标记已应用position:relative;，则这一切都将正常运行。您也可以使用position:relative;使其工作，但这不是正确的方法，因为它会在不同的屏幕分辨率上移动元素。

HTML + CSS缩略图帮助 - 仅定位缩略图

2 个答案: