CSS：最后一个元素在线 [英] CSS: Last element on line

问题描述

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

 < ul> 
< li>< a href =http://google.com>哈佛医学院< / a>< / li> 
< li>< a href =http://google.com>哈佛大学< / a>< / li> 
 ... 
< / ul> 
  

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

 ＃widget-links li {display：inline; } 
＃widget-links li：after {content：\00b7; } 
  

不幸的是，分隔符出现在每行的最后一个元素之后。只需一行，我只需要抓取：last-child 并删除psuedo-element。

Any漂亮的技巧来隐藏最后一个点有多行吗？

解决方案

有趣的问题！这里是我认为一个低技术解决方案与jQuery的诀窍：

  $（function（）{
 var lastElement = false; 
 $（ul> li）。each（function（）{
 if（lastElement&& lastElement.offset（）。top！= $ ）.offset（）。top）{
 lastElement.addClass（nobullet）; 
} 
 lastElement = $（this）; 
}）last （nobullet）; 
}）; 
  

，但是这里的想法：迭代的元素，利用它们都具有相同的属性（大小，边距，显示内联等），当浏览器计算布局时，影响他们的位置。比较每个项目的垂直偏移量与前一个的垂直偏移量;如果它们不同，前一个必须在行的结尾，所以标记它进行特殊处理。最后，标记集合中最后一个特殊处理项目，因为根据定义它是它出现的行中的最后一个项目。

这是一个基于Javascript的解决方案（可以不做，我不知道？）在这里没有问题，因为即使脚本不运行只会是一个非常轻微的视觉退化的网页。 / p>

查看操作 。

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>

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

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

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.

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

解决方案

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.

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.

See it in action.

这篇关于CSS：最后一个元素在线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！