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>

如所见，以上代码管理了链接位于屏幕中心而不是左对齐的情况。

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

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

3 个答案: