Question

我有一个菜单，<li>元素在右边有一个边框。

关于这个的问题是当第二行<li>元素中断时。我知道我可以把最后一个孩子的边界拿出来，但有没有办法知道什么时候它会断线？

*只有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>并删除边框。在你的情况下，这将是第三个孩子。

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

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

<ul>有2行，<li>有border-right </li> </ul>

1 个答案: