css - 如何在不设置宽度或不使用文本缩进的情况下让我的按钮具有 sprite？

Question

我认为这可以通过某种内联 block 魔术来完成？也许吧？

idk.. 但基本上，文本和 sprite 应该是内联的。

现在，它们不是:http://jsfiddle.net/DerNalia/qvZkK/2/

html:

<a href="" class="action_button" rel="facebox" style="">
    <span class="button_sprite_x"></span>
    Delete
</a>

Answer 1

您的布局是否允许您 float 它？

.action_button span.button_sprite_x,
.action_button span.button_sprite_plus,
.action_button span.button_sprite_duplicate,
.action_button span.button_sprite_star{
  width: 20px;
  height: 20px;
  display: block;
  float: left; /* Added float */
}

http://jsfiddle.net/qvZkK/3/

更新:

啊，但您可能希望 Sprite 位于 a 元素的背景中。 display: inline-block 和 float: left 的组合可以做到这一点。

.action_button {
  display: inline-block; /* Add display: inline-block to .action_button */
}

.action_button span.button_sprite_x,
.action_button span.button_sprite_plus,
.action_button span.button_sprite_duplicate,
.action_button span.button_sprite_star{
  display: inline-block; /* And add display: inline-block here, also */
  float: left; /* Added float */
}

http://jsfiddle.net/qvZkK/4/