我正在尝试创建一个水平导航栏(没有下拉菜单,只是一个水平列表),但我找不到在菜单项之间添加垂直分隔线的最佳方法.
实际的HTML如下:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
目前的CSS如下:
.menu li {
display: inline;
margin-left: 25px;
padding-left: 25px;
}
在每个菜单项之间我想要一个小图像作为垂直分隔符,除了我不想在第一个项目之前显示分隔符并且我不希望在第二个项目之后显示分隔符.
最终结果应如下所示:
第1项| 第2项| 第3项| 第4项| 第5项
只需用实际图像替换管道即可.
我尝试了不同的方法 - 我尝试过设置list-style-image属性,但图像没有显示出来.我也尝试将分隔符设置为背景,实际上或多或少都有效,除了它使第一个项目在它前面有一个分隔符.