html - 在链接上设置背景图片以显示在文本链接的右侧

Question

我正在使用 toggleClass 和 slideToggle 来完成以下任务:

当用户选择一个链接时，它会向下滑动div，然后将链接设置为打开，显示相应的背景图片，这只是一个简单的，(+)和(-)打开和关闭分区

我遇到的问题是在链接右侧显示背景图像，给它大约 5-10 像素的边距，以给它一些间距。

这是它正在做的事情的屏幕截图:关闭(显示 (+) 号):http://cl.ly/4634afa1e7aa4fe10072

打开(显示 (-) 符号):http://cl.ly/8bc59ab07da46a173d62

链接的 HTML:<a href="#" class="our-future-intro-slide">Mapping Our Future: Strategic Plan 2010-2015</a>

当它显示未触及的链接时的 CSS，以及在它被选中之后:

// link is not open
.our-future-intro-slide {
    background: url('/images/uploads/images/plus_sign.png') no-repeat 120% 0%;
}

// link is open
.our-future-intro-slide-open {
    background: url('/images/uploads/images/plus-icon.png') no-repeat 120% 0%;
}

这是 jQuery，我想我会把它放进去，它有效，只是用于使背景图像显示在文本右侧的 css。

$(document).ready(function() {
 $('.our-future-intro-slide').click(function() {
  $(this).toggleClass("our-future-intro-slide-open");
  $(".our-future-intro").slideToggle(100);
 });
});

Answer 1

试试这个:

.our-future-intro-slide {
    background: url('/images/uploads/images/plus_sign.png') no-repeat top right;
    padding-right: 30px; /* or whatever the width of the background image is */
}

当然，对其他规则进行相同的修改。