如何通过 CSS 在文本之后对齐链接图标

Question

我有一个带有链接的导航菜单，在文本链接之前我有一个图标，我想把这个图标放在文本链接之后。该网站 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") 中。

Answer 1

以下是更改的代码，以获取您所追求的内容：

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

我正在将左侧填充交换到右侧，并将背景图像推到右侧。

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

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

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