Css 我如何让我的按钮有一个精灵而不设置宽度或使用文本缩进？

我在想，这可以通过某种内联块魔法来实现吗？也许吧

idk。。但基本上，文本和精灵应该是内联的

目前，它们不是：

html:

---

您的布局允许您浮动它吗

.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 */
}

更新：

啊，但是您可能希望精灵位于

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 */
}

---

将文本放在跨度内：

• 将

  a

  标记向左浮动
• 将文本放入
  中，即

  删除
  

• 从

  .button\u sprite\u x

  类中删除宽度，并给它

  左填充：25px

• 确保背景图像设置为“不重复”

看起来你可以从那里找到自己的风格。

---

PS-我在链接中添加了边距以便于查看，不过您可能希望删除边距。

只是应该加下划线的文本（“删除”）吗？通常不会。但这是锚定标记文本的默认样式。添加文字装饰：无；去掉下划线o.oSo你想让下划线永远不存在吗？我不知道这个按钮应该是什么样子。关闭。。。我需要按钮中的精灵，但是=\n我发现我可以将精灵设置为display:table cell，将锚点设置为display:table；，但是后来按钮的高度改变了（按钮高度是18，里面有精灵，扩展到22）。@TheLindyHop是的，刚刚意识到这可能是你想要的。请参阅更新。它可以工作，但在我看来这并不是最好的方法。您只是为一个非语义的图像创建了一个范围。将文本放在范围内，并添加一些左填充和与图像相同的线条高度。这样你就不用担心排列的问题了。如果不使用背景位置，还有其他方法可以使精灵居中吗？因为对于这个问题的当前选择的答案，我需要使用position:relative，并从顶部和左侧轻推精灵2px。是的，这可能与

的行高度有关。action_按钮

。尝试

行高：20px。
.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 */
}