Question

我在页面顶部有一个导航栏。它只是由div包装程式化a链接组成。 JsFiddle

<div class="navigation">
    <a href="someplace">1</a>   
    <a href="someplace">2</a>
    <a href="someplace">3</a>
    <a href="someplace">4</a>   
</div>

当用户缩小页面并且链接超出窗口宽度时，其中一些会降低到下方。我想要的是边界除了最后一个孩子之外的所有东西的底部 - 也就是说，由于窗口调整大小而不是实际的代码放置，最后一个孩子刚刚成为最后一个孩子。这可能吗？

Answer 1

这样的事情应该有效

@media (max-width: 100px) {
    .navigation a { border-bottom: 1px solid red; }
    .navigation a:last-child { border-bottom: none; } 
}
}

Answer 2

如果你想在行之间分隔，你可以使用这段代码来评估某些a元素是否与顶部分开：

$('.navigation a').each (function () {
        var off=$(this).offset().top;
        if (off > 10) {
            $('.navigation a').css('border-bottom','3px solid red');
        } else {
            $('.navigation a').css('border-bottom','none');
        }
    });

点击此处查看 http://jsfiddle.net/LenMU/16/

如果div内容包装，则为条件CSS

2 个答案: