html - <ul> 有 2 行和 <li> 有 border-right

Question

我有一个菜单和 <li>元素在右边有类似边框的东西。

关于这个的问题是当它为 <li> 的第二行中断时元素。我知道我可以去掉 last-child 边界，但是有没有办法知道它何时断线？

*只有 CSS 和自动，我不能使用 nth-child()，因为我无法控制类别。

例子: http://jsfiddle.net/m5cy969s/ - 我想去掉第三个边界 <li> .

HTML

<ul>
    <li>Primeiro</li>
    <li>Segundo</li>
    <li>Terceiro</li>
    <li>Quarto</li>
    <li>Quinto</li>
</ul>

ul,li { padding:0; margin: 0; }

CSS

li {
    display: inline-block;
    list-style: none;
    padding: 3px 6px;
    position: relative;
}

li:after {
    position: absolute;
    content: "";
    right: -2px;
    top: 0;
    border-left: 2px solid blue;
    border-right: 2px solid green;
    height: 100%;
}

ul {
    max-width: 220px;
    border: 1px solid red;
    background-color:pink;
}

Answer 1

用纯 CSS 做到这一点的唯一方法是手动选择子项 <li>在最后打破并删除边界。在您的情况下，这将是第三个 child 。

li:nth-child(3):after { 
    border: none 
}

要“自动”执行此操作，您需要 JS。