在每行的第一个元素上设置边框

Question

（我是网页设计的新手）我有一个链接列表（当前页面上的部分），可以根据视口大小扩展到多行。链接由垂直线分隔（左边框）：

我想避免为每行的第一个元素显示边框。我已经设法为第一个孩子避免了它，但我不知道如何为每行的第一个元素做这件事。比如：

请注意，每个页面的此列表可能不同。

问题：如何达到这样的效果？ CSS？ JavaScript？

.links a {
  display: inline-block;
}
.links a:not(:first-child) {
  border-left: 1px solid black;
  padding-left: 15px;
}
.links a:not(:last-child) {
  padding-right: 15px;
}

<div class="links">
  <a href="#">Link number 1</a>
  <a href="#">Link number 2</a>
  <a href="#">Link number 3</a>
  <a href="#">Link number 4</a>
  <a href="#">Link number 567</a>
  <a href="#">Link number 6</a>
  <a href="#">Link number 7</a>
  <a href="#">Link number 8</a>
  <a href="#">Link number 9</a>
</div>

PS：display: inline-block 只是为了避免在行之间换行。我想避免更改 HTML 结构，因为许多页面都会受到影响。此类链接始终嵌套在 <div class="links"></div> 中，如示例所示。

Answer 1

在容器上设置overflow: hidden;，并给你的链接一个否定的left-margin。您可以通过简单地将padding-right 加倍来抵消其他链接上的负边距。

.links {
  overflow: hidden;
}
.links a {
  display: inline-block;
  border-left: 1px solid black;
  padding-left: 15px;
  margin-left: -15px;
}
.links a:not(:last-child) {
  padding-right: 30px;
}

<div class="links">
  <a href="#">Link number 1</a>
  <a href="#">Link number 2</a>
  <a href="#">Link number 3</a>
  <a href="#">Link number 4</a>
  <a href="#">Link number 567</a>
  <a href="#">Link number 6</a>
  <a href="#">Link number 7</a>
  <a href="#">Link number 8</a>
  <a href="#">Link number 9</a>
</div>

---

工作原理

左边距和左边框存在，但是负边距迫使它们离开容器。然后我们用overflow: hidden 隐藏容器外的任何东西。

下面的示例通过删除 overflow: hidden; 并给容器一个边框来展示实际发生的情况：

.links {
  border: 1px solid red;
  overflow: visible;
  margin-left: 30px;
}
.links a {
  display: inline-block;
  border-left: 1px solid black;
  padding-left: 15px;
  margin-left: -15px;
}
.links a:not(:last-child) {
  padding-right: 30px;
}

<div class="links">
  <a href="#">Link number 1</a>
  <a href="#">Link number 2</a>
  <a href="#">Link number 3</a>
  <a href="#">Link number 4</a>
  <a href="#">Link number 567</a>
  <a href="#">Link number 6</a>
  <a href="#">Link number 7</a>
  <a href="#">Link number 8</a>
  <a href="#">Link number 9</a>
</div>

Answer 2

这是一种简单的方法，您可以使用伪元素隐藏第一个边框。

.links {
  overflow: hidden;
  position:relative;
  width:600px;
  animation:change 4s linear infinite alternate;
}
.links:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:1px;
  background:#fff;
}
.links a {
  display: inline-block;
  border-left: 1px solid black;
  padding-left: 15px;
}

@keyframes change {
  to{width:160px}
}

<div class="links">
  <a href="#">Link number 1</a>
  <a href="#">Link number 2 5q4d </a>
  <a href="#">Link number 3</a>
  <a href="#">Link number 4</a>
  <a href="#">Link number 567</a>
  <a href="#">Link number 6</a>
  <a href="#">Link number 7 dqsd dqs</a>
  <a href="#">Link number 8</a>
  <a href="#">Link number 9</a>
</div>

Answer 3

虽然我更喜欢 Tyler Roper 和 Temani Afif 提出的解决方案，因为它们显示了第一次渲染的正确结果（在具有许多附加资源的页面中尤其明显），但我想分享另一个解决方案（使用 JavaScript）启发在this other answer。

$(document).ready(function() {
  fn = function() {
    var prevTop = -1;
    $("a", $(".links")).each(function() {
      var link = $(this);
      var top = link.offset().top;
      if (top == prevTop) {
        link.attr("class", "border");
      } else { // new line
        prevTop = top;
        link.removeClass("border"); // in case 'border' was previously added
      }
    });
  };
  $(window).resize(fn);
  fn();
});

.links {
  text-align: center;
}

.links a {
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
}

.links a.border {
  border-left: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="links">
  <a href="#">Link number 1</a>
  <a href="#">Link number 2</a>
  <a href="#">Link number 3</a>
  <a href="#">Link number 4</a>
  <a href="#">Link number 567</a>
  <a href="#">Link number 6</a>
  <a href="#">Link number 7</a>
  <a href="#">Link number 8</a>
  <a href="#">Link number 90</a>
</div>

如所见，上面的代码管理了链接在屏幕中居中而不是左对齐的情况。

注意：由于文本居中不是我最初问题的一部分（在我实施接受的答案后出现了这样的要求），我没有考虑到提出的其他答案的正确性，我只是发布此贡献以确保完整性。