删除第二行上水平列表项的边框

Question

我有一个奇怪的查询。

我有一个水平的链接列表，使用边框来模拟“管道”分隔符，它可以分成两行 - 请参阅http://jsfiddle.net/gfkPG/162/

我希望第二行的第一项没有'pipe'分隔符。也就是说，我想要这个效果：

我不知道每个链接的长度是多少，也不知道会有多少链接，或者我是否会在一开始就为多行提供足够的链接。因此，我无法在特定项目上任意设置课程。

我不能将图像绝对放在左边项目的边框上，因为我的背景颜色并不总是白色 - 有时它是彩色渐变。

有没有办法在纯CSS中执行此操作？如果没有，是否有任何Javascript解决方案？

我听说过CSS剪辑属性，但我被告知它在旧浏览器上不起作用（我的解决方案需要支持IE7 +）。我很难找到替代品。

提前致谢。

Answer 1

这很麻烦，但这可能会奏效。

<强> HTML

<div id="menu">
  <ul class="list">
     <li>This is a list item</li>
     <li>This is a list item</li>
     <li>This is a list item</li>
     <li>This is a list item</li>
  </ul>
</div>

<强> CSS

.menu{overflow:hidden;}
ul#list{margin-left:-1px;}
ul#list li{border-left:solid 1px;}

Answer 2

我不清楚你是否知道物品的宽度。如果你知道每行总有三个（或其他），你可以使用nth-child selector。

Answer 3

请参阅此jsFiddle：http://jsfiddle.net/gfkPG/163/

设置li标签的样式，使其具有border：none