CSS:最后一个元素在线

Question

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

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

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

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

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

任何漂亮的技巧隐藏最后一个点多行？如果绝对必要,我会接受奇怪的CSS或JavaScript.

Answer 1

有趣的问题!以下是我认为使用jQuery实现这一技巧的"低技术"解决方案:

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

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

恕我直言,这是一个基于Javascript的解决方案(可以没有,我想知道吗？)这里完全没有问题,因为即使脚本没有运行,只会是一个非常轻微的视觉降级你的网页.

看到它在行动.

Answer 2

我面临同样的情况,并在响应式设计中这样做.这是我唯一的CSS解决方案.

div {
  overflow: hidden;
  margin: 1em;
}
div ul {
  list-style: none;
  padding: 0;
  margin-left: -4px;
}
div ul li {
  display: inline;
  white-space: nowrap;
}
div ul li:before {
  content: " \00b7";
}

<div>
  <ul>
    <li>item 1</li>
    <li>item B</li>
    <li>item 3</li>
    <li>item IV</li>
    <li>the long item</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item awesome</li>
    <li>give me your money</li>
    <li>contact</li>
    <li>menu item more</li>
    <li>CSS is awesome</li>
    <li>CSS3 is great</li>
    <li>more</li>
    <li>last item</li>

  </ul>
</div>

在这里它也是一个小提琴