1

I have a navigation menu with links, before the text link I have an icon, I would like to put this icon after the text link. The website is here http://www.labella.co.il/.

CSS of the link:

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

Icon image is in url("1-default/bullet.png").

4

3 回答 3

4

这是更改后的代码以获取您想要的内容:

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

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

请注意,我使用100%的不是“幻数”(就像其他答案一样)。这意味着即使宽度发生变化,图标仍会对齐,无需维护!

于 2012-12-13T00:19:35.533 回答
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;
}
于 2012-12-13T00:17:52.627 回答
1

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;
}
于 2012-12-13T00:17:49.197 回答