Question

我有一个导航菜单，基本上是一个链接列表，包含多个链接，每个链接长度依赖n个链接等，

以上是我要重新创建的内容，因为您可以在每行上的最后一个链接没有分隔符，是否可以复制此内容？目前，我已设法在每个链接之间和每一行的末尾获取一个分隔符。

我无法控制HTML，否则我会遍历链接并且每行只显示x个链接，然后我可以nth-child()但我永远不会知道会显示多少链接每一行。

这是一个测试的链接，因为你可以在每一行的最后一个链接有一个边框 - 理想情况下我想在同一行上没有兄弟的情况下关闭它们。

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

Answer 1

鉴于我们没有看到所有标记，您可以使用许多框架在元素之间添加边距时使用的相同技巧，其中overflow设置为hidden parent 1}}然后以负边距移动元素。

这个很棒，它的背景是透明的，如果使用的是图像，这里使用伪::before作为分隔符。

Stack snippet

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

更新

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

Codepen demo

(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));

Answer 2

A＆＃39; hacky＆＃39;解决方案是在|上使用:before伪元素添加li，并在ul

上使用伪元素覆盖它

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

css将分隔符添加到导航

2 个答案: