制作垂直列表，并在项目之间放置一些东西

Question

问题的第一部分很简单：

http://jsfiddle.net/Pq3KM/

ul li
{
    display: inline-block;
}

<ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
</ul>

到目前为止它工作正常，但我希望项目之间的东西。例如，我希望它们看起来很相似：

menu1 | menu2 | menu3

而不是

menu1 menu2 menu3

怎么做？

Answer 1

您可以使用:after伪，这里使用|管道字符，它使用content属性嵌入:after伪。对于最后一个元素，我使用last-of-type来摆脱管道。您还可以在此处通过background-image伪:after元素添加inline-block。你也可以space up ^Demo 将元素变为inline-block

Demo

ul li:after {
    content: " | ";
}

ul li:last-of-type:after {
    content: "";
}

Answer 2

您可以通过在“li”之前添加除第一个之外的垂直线字符来完成此操作。

<ul>
   <li>menu1</li>
 | <li>menu2</li>
 | <li>menu3</li>
</ul>