CSS：向导航添加分隔符

Question

我有一个导航菜单，基本上是一组链接列表，会根据链接长度等因素自动换行成多行，每行可能包含不同数量的链接。

以下是我试图重新创建的内容，可以看到每行的最后一个链接没有分隔符，是否可能复制这个？目前我已经成功在每个链接之间和每行末尾添加了分隔符。

我无法控制HTML，否则我会循环遍历链接并仅在每行显示x个链接，然后我可以使用nth-child()，但是我永远不会知道每行将显示多少个链接。

这里是一个测试链接，可以看到每行的最后一个链接都有一个右边框，如果同一行没有兄弟节点，我希望能够关闭这些链接的右边框。

https://jsbin.com/givaquyozu/edit?html,css,output

- Udders

---

代码或片段？ - Mohammed Wahed Khan

我的意思是使用CSS无法做到像“浮动链接并在该行中的最后一个链接后不放置分隔符”这样的效果。CSS不知道哪个元素是该行中的最后一个（JS也不知道）。 - pavel

我认为仅使用CSS无法完成这个任务，因为一行上链接的数量是动态的。需要使用更复杂的东西来实现。 - Mihai T

顺便说一下，你的_jsbin_示例除了body标签之外没有任何标记。 - Asons

既然你提到如果你控制HTML就可以运行脚本，我更新了我的答案并添加了一个建议，让你不需要这样做。 - Asons

Answer 1

考虑到我们无法看到所有标记，您可以使用许多框架使用的相同技巧，在元素之间添加边距时，将overflow设置为父级上的hidden，然后使用负边距移动元素。

这种方法的好处是它对其背景是透明的，如果使用例如图像，则在此处使用伪元素::before作为分隔符。

堆栈片段

.parent {
  overflow: hidden;
}
.parent ul {
  width: 381px;
  padding: 0;
  margin-left: -5px;
}
.parent ul li {
  display: inline-block;
}
.parent ul li::before {
  content: '|';
  padding-right: 5px;
}
a {
  display: inline-block;
  padding-right: 8px;
  padding-left: 8px;
}

<div class='parent'>
  <ul>
    <li><a href='#'>Link nr 1</a></li>
    <li><a href='#'>Link nr 2</a></li>
    <li><a href='#'>Link nr 3</a></li>
    <li><a href='#'>Link nr 4</a></li>
    <li><a href='#'>Link nr 5</a></li>
    <li><a href='#'>Link nr 6</a></li>
    <li><a href='#'>Link nr 7</a></li>
  </ul>
</div>

---

更新

即使您不知道每行有多少个链接，仍然可以使用脚本循环遍历它们，其中除了每行的第一个项目以外的所有项目都会获得一个类。

Codepen演示

(function ($) {
  //  preload object array to gain performance
  var $items = $('.parent ul li');

  //  run at resize
  $( window ).resize(function() {
    $.fn.setDelimit(false,0);   
  });

  $.fn.setDelimit = function(nl,idx) {

    $items.each(function(i, obj) {    

      //  did top value changed, then new row
      if ($items.eq(i - 1).offset().top != $(obj).offset().top) {
        nl = true;
      }

      if (!nl) {        
        $(obj).addClass('delimiter');
      } else {
        // reset
        $(obj).removeClass('delimiter');
      }
      nl = false;

    });

  }

  //  run at load
  $.fn.setDelimit(true,0);

}(jQuery));

- Asons

Answer 2

一个“hacky”的解决方案是在

上使用:before伪元素添加|，然后在ul上覆盖它。

ul {
  padding: 0;
  list-style: none;
  width: 400px;
  position: relative;
  background: #eee;
}

ul:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: #eee;
}

li {
  display: inline-block;
  font-size: 2em;
}

li:before {
  content: ' | ';
  display: inline-block;
}

<ul>
  <li>some link</li>
  <li>some link dfd</li>
  <li>some link</li>
  <li>some link d</li>
  <li>some</li>
  <li>some link</li>
</ul>
<ul>
  <li>some link</li>
  <li>some link dfd</li>
  <li>some link</li>
  <li>som</li>
  <li>some link</li>
</ul>

- sol