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/

Answer 2

完整的CSS解决方案

https://jsfiddle.net/w4k70at5/

我在导致问题的<li>中添加了一个类，并且这个类设置如下：

当屏幕尺寸小于590时，我告诉班级显示正确的红色边框
当屏幕尺寸高于此值时，边框是透明的

我使用media queries CSS函数来执行此操作。这允许为不同的变量设置不同的类behiaviour（在这种情况下就像屏幕大小）。

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

2 个答案: