html - 使用 css 在内联列表项之间添加箭头(图像)

Question

我有以下无序列表:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

渲染时内联显示如下:

1 2 3 4

我有一个从左到右的箭头 (arrow.gif) 图像，我想在每个后续数字之间显示(使用 CSS)，以便列表呈现如下:

1 ---> 2 ---> 3 ---> 4

这可以仅使用 CSS 来完成吗？

非常感谢!

Answer 1

我会这样做:

li {display:inline-block;
}
li + li:before {
content:url(arrow.gif);
vertical-align:middle;
/* extra make up , whatever*/
display:inline-block;
padding:0 0.25em;
}

第一个 li 没有箭头，然后任何其他的将在其 left 侧显示一个箭头(如果文档方向是 ltr ，否则相反).

DEMO

---

要看到站在外面的箭头，您可以将它们设置在绝对位置或使用负文本缩进宽度，至少，箭头的宽度:

DEMO 2

基本的 html 可以是相似的:

li +li:before {
    display:inline-block;
    content:url('http://mywaive.com/templates/friend5/images/arrow.gif');
    vertical-align:middle;
    text-indent:-35px;
}
li {
    display:inline-block;
    border:solid;
    margin-left: 40px;
}