0

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

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

为了继续，首先选择[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;
}

我发现上面浏览的大部分内容都在这里，但我肯定忽略了一些东西，因为它并没有真正按照我希望的方式工作。我的第一个箭头出现了，但忽略了休息。

4

1 回答 1

0

该属性实际上是inline-block（不是下划线），只需更改它，您就应该清楚

于 2013-02-28T09:25:22.873 回答