我有一些教程正在准备中，我想使用箭头图像（向上/向下/向左/向右）来解释用户应该采取的步骤。
所以屏幕结果看起来有点如下：
为了继续，首先选择[up_arrow_image]，然后单击[left_arrow_image]两次，然后选择[enter_image]。最后可能有几百个这样的步骤，所以我想使用内联跨度来显示箭头，而不是直接在 html 中编码它们。我已经能够让它在我的段落的第一个跨度中运行，但这就是它停止的地方。
我的简化 html ：
<p>In order to proceed first select <span class="arrow arrow_up"><!-- up --></span>,
then click <span class="arrow arrow_left"><!-- left --></span> twice,
and select <span class="arrow select"><!-- up --></span></p>
我的CSS现在看起来像这样：
.arrow {
display:inline_block;
width: 20px; height: 20px;
padding-left:20px;
background-image: url(arrow.png);
background-repeat: no-repeat;
}
.arrow_up {
background-position: 0px 0px;
}
.arrow_left {
background-position: 0px -20px;
}
.enter {
background-position: 0px -40px;
}
我发现上面浏览的大部分内容都在这里，但我肯定忽略了一些东西，因为它并没有真正按照我希望的方式工作。我的第一个箭头出现了，但忽略了休息。