我有一个带链接的导航菜单,在文本链接之前我有一个图标,我想把这个图标放在文本链接之后。该网站位于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")
。
答案 0 :(得分:4)
以下是更改后的代码:
.sidebar ul.menu li a {
background: url("1-default/bullet.png") no-repeat scroll 100% 12px transparent;
padding: 10px 22px 10px 0;
}
我正在将左侧边框交换到右侧,并将背景图像推到右侧。
请注意,我使用了100%
而不是“魔数”(就像其他答案一样)。这意味着即使宽度发生变化,图标仍然会排成一列,无需维护!
答案 1 :(得分: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;
}
答案 2 :(得分: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;
}