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

Question

我有一个相当奇怪的疑问。

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

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

我事先不知道每个链接的长度是多少，也不知道会有多少个链接，或者一开始我是否会有足够的链接用于多行。因此我不能随意为特定元素设置类。

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

有什么方法可以在纯 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;}