Question

我有一些评级系统的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">     </a> | <a href="#" class="thumb-down rating">     </a>

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

如何在不需要 ?

的情况下显示精灵

Answer 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;
 }

Answer 2

由于链接是内联元素，因此无法指定它们的宽度和高度。他们只从内容中获取尺寸，这就是空间给出尺寸的原因。

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

 .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;
 }

Answer 3

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

Answer 4

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

css不显示图像，除非

4 个答案: