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

乔巴特

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

我想避免为每行的第一个元素显示边框。我设法避免为第一个孩子使用它，但是我不知道如何为每一行的第一个元素使用它。就像是：

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

问题：如何达到这样的效果？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>示例中所示的中。

泰勒罗珀

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。