如何在列表元素的导航中使用分隔符？

Question

我想创建一个在每个列表元素之间得到分隔符的导航。

这是一个简单的HTML / CSS代码/模板：

<nav>
      <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
      </ul>        
</nav>

nav ul {
  list-style:none;
  float:right;
}

nav ul li {
float:left;
padding-left:10px;
}

nav ul li a {
  color:#111;
  font-family:Verdana;
  font-size:15px;
  text-decoration:none;
}

nav ul li a:hover {
  color:#9F3039;
}

所以只是一个简单的导航，从右侧浮动一个徽标，这里没有显示在代码中。现在我想在每个链接之间进行分配 - 我知道我可以使用border-right进行操作，并且只使用我上一次设置了border-right的上一个listelement中的另一个类，但我想使用一种特殊的分隔符 - 一个图像

我怎样才能做到最好？

Answer 1

实现此目的的一种方法是将分隔符放在li元素的背景图像中。