html - 删除导航中链接之间的最后一个栏

Question

我这里有一个 jsfiddle - https://jsfiddle.net/w4k70at5/

这是一个非常简单的问题，但我有点难过。

我在每个链接之间用边框将它们分开。

我不想在该行的最后一个链接上添加边框。

我可以删除最后一个边框，但我可以删除“链接六”之后的边框，然后在调整页面大小时删除该行最后一个链接的边框。

        *{
            margin: 0;
            padding: 0;
        }

        nav{
            margin: 50px;
            max-width: 600px;
            margin: 50px auto 0 auto;
        }

        ul{
            list-style: none;
            text-align: center;
        }

        li{
            display: inline;
            margin: 0 0 10px 0;
        }

        a{
            display: inline-block;
            border-right: 1px solid red;
            font-size: 1.5em;
            padding: 5px;
            text-decoration: none;
        }

        li:last-of-type a{
            border-right: none;
        }

Answer 1

您可以使用 Jquery 执行此操作:

第一种可能性:

添加一个 JQuery 函数，如果它是行中的最后一个，它将向您的 ul 添加一个类:

$(function() {
    var lastElement = false;
    $("ul > li").each(function() {
        if (lastElement && lastElement.offset().top != $(this).offset().top) {
            lastElement.addClass("noborder");
        }
        lastElement = $(this);
    }).last().addClass("noborder");
});

还有一个 CSS 类来移除边框:

.noborder a {
    border: 0;   
}

如果需要，您可以使用之前的解决方案删除 CSS 规则:

li:last-of-type a {
    border-right: none;
}

JSFiddle 1:https://jsfiddle.net/ghorg12110/w4k70at5/4/

第二种可能性:

相同的 JQuery 函数，但不会以最后一个 ul > li a 为目标(因为您已经使用 CSS 将其作为目标):

$(function() {
    var lastElement = false;
    $("ul > li").each(function() {
        if (lastElement && lastElement.offset().top != $(this).offset().top) {
            lastElement.addClass("noborder");
        }
        lastElement = $(this);
    });
});

还有一个 CSS 类来移除边框:

.noborder a {
    border: 0;   
}

JsFiddle 2:http://jsfiddle.net/ghorg12110/x93456gr/