我正在尝试制作一个带有箭头的HTML列表(类似于:步骤1-2-3)。
这是我要完成的结果的wireframe:
我猜这个图标和内容会是这样的:
<ul class="stepsCont">
<li>
<img src="icon" />
<p>content</p>
</li>
</ul>
.stepsCont li {display: inline; padding: 0 30px;}
但是如何添加箭头?
答案 0 :(得分:3)
您可以将箭头作为:before
伪元素的内容图片插入,从第二个<li>
开始,例如
li + li:before {
content: url(arrow.png);
display: inline-block;
vertical-align: middle;
margin: 0 30px;
}
或者您也可以将箭头添加为背景
li + li {
background: url(arrow.png) center left no-repeat;
padding-left: 50px;
}
Codepen示例:http://codepen.io/anon/pen/mjCnA
(解决方案甚至都在IE8
上工作。)
答案 1 :(得分:2)
您可以在之前使用或之前使用:
.stepsCont li:after {
content: ">";
}
.stepsCont li:last-child:after {
display: none;
}
您可以在此处设置背景图片而不是>
答案 2 :(得分:2)
您可以使用:after
执行此类操作:
.stepsCont li {display: inline; padding: 0 30px;}
/*Added code*/
li:after{
content:" >";
}
li:last-of-type:after{
content:"";
}
然后设置:after
。