【问题标题】: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; 并使用 lefttop CSS 属性对齐它。但是,如果ol 的父标签应用了position:relative;,这一切都会正常工作。你也可以使用position:relative; 让它工作,但这不是正确的方法,因为它会在不同的屏幕分辨率上移动元素。

【讨论】:

    猜你喜欢
    • 2012-09-18
    • 2012-09-13
    • 2011-07-01
    • 2015-06-14
    • 2012-06-12
    • 2016-05-10
    • 2018-08-06
    • 2012-03-06
    • 2017-03-05
    相关资源
    最近更新 更多