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

我有一个相当奇怪的问题

我有一个水平链接列表，使用边框模拟“管道”分隔符，可以拆分为两条线-请参阅

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

我不知道每个链接的长度将提前，我也不知道有多少链接，或者我是否会有足够的链接，甚至超过一行放在首位。因此，我不能在特定的项目上任意设置一个类

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

在纯CSS中有什么方法可以做到这一点吗？如果没有，是否有Javascript解决方案

我听说过CSS剪辑属性，但我听说它在较旧的浏览器上不起作用（我的解决方案需要支持IE7+）。我找不到其他选择

---

提前谢谢。

我不清楚您是否知道这些物品的宽度。如果您知道每行始终有三个（或任何内容），您可以使用。

这很混乱，但这可能会起作用

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>

请参阅此JSFIDLE：

---

设置li标记的样式，使其具有边框：无

我不知道项目的宽度（文本在不同的情况下会有所不同），不-只有顺序。这对我不起作用-我不知道项目的数量或长度。因此，我不能任意地将“无边界”类应用于特定的li元素。看，我建议使用javascript，为什么这是一个公认的答案？在IE7中，将文本包装到第二行并形成第二个边框并不能解决这个问题。

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