CSS:最后一个元素

2022-01-10 00:00:00 css-selectors html-lists html css

我有一个包含两行的无序 [内联] 链接列表:

I've got an unordered [inline] list of links that wraps across two lines:

<ul>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    ...
</ul>

我通过 CSS 伪元素添加点分隔符:

I add the dot separator via a CSS pseudo-element:

#widget-links li { display: inline; }
#widget-links li:after { content: " 0b7"; }

不幸的是，分隔符出现在每行的最后一个元素之后.只需一行，我只需抓住 :last-child 并删除伪元素.

Unfortunately, the separator appears after the last element on each line. With just one line, I'd simply grab :last-child and remove the psuedo-element.

有什么巧妙的技巧可以用多条线隐藏最后一个点吗?如果绝对必要，我对奇怪的 CSS 或 JavaScript 持开放态度.

Any nifty tricks to hide that last dot with more than one line? I'm open to weird CSS, or JavaScript if absolutely necessary.

推荐答案

有趣的问题！以下是我认为可以解决问题的 jQuery 的低技术"解决方案:

Interesting question! Here's what I consider a "low-tech" solution with jQuery that does the trick:

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

算法并不难理解，但想法是这样的:迭代元素，利用它们都具有相同的属性(大小、边距、显示内联等)，这些属性会在浏览器计算布局时影响它们的位置.比较每一项的垂直偏移量和前一项的垂直偏移量；如果它们不同，则前一个必须位于该行的末尾，因此请将其标记为特殊处理.最后，还要将集合中的最后一项标记为特殊处理，因为根据定义，它是它出现的行中的最后一项.

The algorithm is not hard to follow, but here's the idea: iterate over the elements, taking advantage that they all have the same properties (size, margin, display inline etc) that affect their position when the browser computes layout. Compare the vertical offset of each item with that of the previous one; if they differ, the previous one must have been at the end of the line so mark it for special treatment. Finally, mark the very last item in the set for special treatment as well, since by definition it is the last item in the line on which it appears.

恕我直言，这是一个基于 Javascript 的解决方案(我想知道是否可以不这样做?)在这里完全没有问题，因为即使脚本没有运行，也只会有非常轻微的视觉效果降级您的网页.

IMHO the fact that this is a Javascript-based solution (can it be done without, I wonder?) is no problem at all here, as even if the script does not run there is only going to be an extremely slight visual degradation of your webpage.

查看实际操作.

相关文章