代码之家 › 专栏 › 技术社区 › cbuchart

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

responsive-design css html javascript

cbuchart · 技术社区 · 6 年前

我希望避免为每行的第一个元素显示边框。我已经设法避免了第一个孩子,但我不知道如何做到这一点,为第一个元素的每一行。比如:

问题 :如何达到这样的效果?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>

display: inline-block 只是为了避免行间缠绕。我希望避免更改HTML结构,因为许多页面都会受到影响。这样的链接总是嵌套在 <div class="links"></div> 如示例所示。

3 回复 | 直到 6 年前

Tyler Roper 6 年前

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

下面的示例显示了通过删除 溢出:隐藏; 给容器一个边界:

.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=“#”>链接编号1</a>
<a href=“#”>链接编号2</a>
<a href=“#”>链接编号4</a>
<a href=“#”>链接编号567</a>
<a href=“#”>链接编号6</a>
<a href=“#”>链接编号9</a>
</部门>

Temani Afif 6 年前

这里有一种简单的方法,可以使用伪元素隐藏第一个边框。

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

cbuchart 6 年前

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>

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

注:由于文本居中不是我最初问题的一部分(这种要求是在我实现了已接受的答案之后出现的),我不认为为了其他建议答案的正确性,我只是为了完整性而发表这篇文章。