如何通过 CSS 在文本后对齐链接图标？答案

【问题标题】：How to align a link icon after the text via CSS?如何通过 CSS 在文本后对齐链接图标？
【发布时间】：2012-12-13 00:14:05
【问题描述】：

我有一个带链接的导航菜单，在文本链接之前我有一个图标，我想把这个图标放在文本链接之后。该网站在这里http://www.labella.co.il/。

链接的CSS：

.sidebar ul.menu li a {background: url("1-default/bullet.png") no-repeat scroll 0 12px transparent;}

图标图片位于url("1-default/bullet.png")。

【问题讨论】：

标签： html css icons

【解决方案1】：

这是获得您所追求的更改后的代码：

.sidebar ul.menu li a {
    background: url("1-default/bullet.png") no-repeat scroll 100% 12px transparent;
    padding: 10px 22px 10px 0;
}

我将左边的内边距交换到右边，并将背景图像推到右侧。

请注意，我使用了 100% 而不是“幻数”（与其他答案一样）。这意味着即使宽度发生变化，图标仍然会对齐，无需维护！

【讨论】：

【解决方案2】：

更改背景图像的位置并添加一些填充，以便文本不会覆盖它：

.sidebar ul.menu li a {
    background: url("1-default/bullet.png") no-repeat scroll 100% 12px transparent;
}

.sidebar ul.menu li a {
    cursor: pointer;
    text-decoration: none;
    padding: 10px 23px 10px 22px;
    display: block;
    background: #CCC;
}

【讨论】：

您应该使用 100% 而不是“幻数”。这意味着无论列表项的宽度如何，它都可以工作，无需任何更改。
@joshnh 你是对的 - 100% 是更好的选择。但是，如果是您对更环保者和我的回答投了反对票-您没有正确使用反对票。它保留给不正确的答案，但是两个答案都是正确且完美的答案。你的只是更多正确
在我的拙见中，教坏习惯几乎和不正确答案一样糟糕。
@joshnh 自从在固定宽度元素上使用基于px 的值时，就变成了“不好的做法”？
请阅读我的第一条评论（特别注意“幻数”）。

【解决方案3】：

background-position 可以更改为：

.sidebar ul.menu li a {
  background: url("1-default/bullet.png") no-repeat scroll 202px 12px transparent;
}

然后padding 调整为图标腾出空间：

.sidebar ul.menu li a {
   cursor: pointer;
   text-decoration: none;
   padding: 10px 22px 10px 0;
   display: block;
   background: #CCC;
}

【讨论】：

您应该使用 100% 而不是“幻数”。这意味着无论列表项的宽度如何，它都可以工作，无需任何更改。
有时，拥有更多控制权可能会很好，但 100% 也是一个有效的选择 :)
在这种情况下，如果您想要更多控制，那么在列表项上使用填充会更有意义。