0

我有一些用于评级系统的 CSS 精灵：http: //i.imgur.com/qeb2b.png

加载拇指时

 .thumb-down {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
    width: 15px;
    height: 16px;
 }

 .thumb-up {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
    width: 15px;
    height: 16px;
 }

我可以让拇指出现的唯一方法是如果我这样做：

Was this review helpful? <a href="#" class="thumb-up rating">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> | <a href="#" class="thumb-down rating">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

如果我删除所有，&nbsp;那么拇指就会消失。如果我只留下一个&nbsp;，那么它会显示精灵的部分视图。

如何在不需要的情况下显示精灵&nbsp;?

peewee是一个用 Python 编写的小型 ORM。它提供了一个基于 SQL 的轻量级查询接口，并在查询时使用 SQL 概念，如连接和 where 子句。它支持 sqlite、mysql 和 postgresql。

4

4 回答 4

1

通过使用float:left：

 .thumb-down {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
    width: 15px;
    height: 16px;
    float: left;  /* OR float:right, depending on what you need */
 }

 .thumb-up {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
    width: 15px;
    height: 16px;
    float: left;
 }
于 2012-06-04T09:26:01.430 回答
1

由于链接是内联元素，您无法为它们指定宽度和高度。它们仅从内容中获取大小，这就是空格赋予它们大小的原因。

我认为您使用的最佳选择是使链接内联块元素。这样它们是块元素，因此它们可以具有特定的宽度和高度，但它们仍然是文本流中的内联元素，因此您不必更改标记。

 .thumb-down {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
    display: inline-block;
    width: 15px;
    height: 16px;
 }

 .thumb-up {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
    display: inline-block;
    width: 15px;
    height: 16px;
 }
于 2012-06-04T09:30:28.800 回答
0

图像是背景。但是要使背景可见，元素必须具有一定的高度和宽度。在您的情况下，空标签没有高度和宽度。你应该让它显示：块

于 2012-06-04T09:26:12.203 回答
0

只需display: inline-block;在您的两个 CSS 类中使用。

于 2012-06-04T09:30:11.040 回答