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;}