Question

我在管道中有一些教程，我想使用箭头图像（上/下/左/右）来解释用户应该采取的步骤。

所以屏幕结果看起来有点如下：

要继续，请先选择[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;
}

我发现上面的大部分内容都在这里浏览，但我确实忽略了一些东西，因为它并没有按照我希望的方式进行。我的第一支箭出现了，但是休息被忽略了。

Answer 1

该属性实际上是inline-block（不是下划线），只是改变它，你应该是明确的

添加多个内嵌图像跨度

1 个答案: