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

我有一个奇怪的查询。删除第二行水平列表项上的边框

我的使用边界来模拟“管”分离器链接，可以拆分为两行水平列表 - 见http://jsfiddle.net/gfkPG/162/

我想第二行的第一个项目没有一个“管' 分隔器。也就是说，我想要这个效果： enter image description here

我不知道每个链接的长度是多少，我也不知道会有多少链接，或者我是否有足够多的链接首先是一条线。所以我不能随便在一个特定的项目上设置一个班级。

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

有没有办法在纯CSS中做到这一点？如果没有，是否有Javascript解决方案？

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

在此先感谢。

来源

2012-01-05 Jimmy Breck-McKye

这很麻烦，但这可能工作。

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

来源

2012-01-05 18:21:45 m4rk

为什么这是一个被接受的答案？这并没有解决问题，文字换行到第二行，并在IE7中形成第二个边框。 – 2012-10-31 20:37:28

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

来源

2012-01-05 18:19:53 Tom

我不会知识项目范围很宽（文本在不同情况下会有所不同），不包括 - 仅限订单。 – 2012-01-05 19:35:54

看到这个的jsfiddle：http://jsfiddle.net/gfkPG/163/

风格LI标记，使其具有边界：无

来源

2012-01-05 18:24:36 jacktheripper

这不适用于我 - 我不知道项目的数量，或他们的长度。因此，我不能任意将“无边界”类应用于某个特定的元素。请参阅http://jsfiddle.net/7WgsA/1/ – 2012-01-05 19:38:35

我建议使用JavaScript然后 – jacktheripper 2012-01-05 19:39:23

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

回答

相关问题