如何从最后一行中的元素中删除边框?

共7个回答,已解决, 标签: html css css3 flexbox css-selectors

我的布局是这样的 (我键入的是带有内联样式的简化版本, 而不是类)

.qa {
  border-bottom: 1px solid #ccc;
}


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer

这基本上呈现如下所示:

enter image description here

我的问题是:

如何摆脱最后一行中的边框?

第1个答案(采用)

您可以向元素添加负底部边距, 然后隐藏溢出。这将隐藏不需要的边框。

.qa {
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px; /*to rectify the bottom margin, we can also consider padding-bottom*/

  /irrelevant styles/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 40%;
}

即使行中的元素数与 2 不同, 此技巧也应起作用:

.qa {
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px;


  /irrelevant styles/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 20%;
}

它还将使用可重排的布局, 在小屏幕上, 列数可以更改:

.qa {
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px;


  /irrelevant styles/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 20%;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;
}
第2个答案

1: 使用另一个 CSS 类

我们可以创建另一个 CSS 类, 该类将删除存在元素中的任何样式

.no-border {
  border-bottom: none;
}

然后将此类添加到 html 元素中, 例如。


    Question
    Answer

2: 使用 CSS 伪选择器


.qa:last-child {
  border-bottom: none;
}

.qa:nth-last-child(2) {
    border-bottom: none;
}
第3个答案

不要把它看作 border-bottom 是。

将其视为 border-top 并排除前两个元素。

因此, 而不是这样:

.qa { border-bottom: 1px solid #ccc; }

试试这个:

.qa + .qa + .qa { border-top: 1px solid #ccc; }
.qa + .qa + .qa {
  border-top: 1px solid #ccc;
}


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer

下一个同级组合器( + ) 的目标是一个元素, 该元素前面有另一个元素, 并且两者共享相同的父元素。

因此 .qa + .qa , 只针对 .qa 前面有一个元素的元素 .qa

.qa + .qa + .qa仅针对 .qa 前面有两个元素的元素 .qa


或者, 您也可以尝试以下操作:

.qa:nth-child(n + 3) { border-top: 1px solid #ccc; }
.qa:nth-child(n + 3) {
  border-top: 1px solid #ccc;
}


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer



第4个答案

从您的布局来看, 这些项目是编号的:

  [1]  [2]
  [3]  [4]
  [5]  [6]

现在, 您可以:

  • 从第 5 和第 6 项中删除底部的边界
.qa {
  border-bottom: 1px solid #ccc;
}

.qa:nth-of-type(5),
.qa:nth-of-type(6) {
  border-bottom: none;
}
  • 将边界底部添加到第 14 个项目:
.qa:nth-of-type(n+5) {
  border-bottom: 1px solid #ccc;
}
  • 做类似的数学, 但添加border-top

您也可以翻转 flex 方向, 使其更 "合理", 但也需要固定的高度 (需要包装, 请参见此处):

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

以不同的方向对项目进行编号:

  [1]  [4]
  [2]  [5]
  [3]  [6]

现在你在每一个第 3 件物品上都要重新确认边界底部:

.qa {
  border-bottom: 1px solid #ccc;
}

.qa:nth-of-type(3n) {
  border-bottom: none;
}

还有更复杂的修复。例如, 您可以对行中的项目进行分组, 并在基于行的选择器上应用边框。这将是最接近你真正的意图摆在首位:

.row .qa {
  border-bottom: 1px solid #ccc;
}

.row:last-of-type .qa {
  border-bottom: none;
}
第5个答案

您可以 border-top 使用 :nth-child 和删除 css 选择器的前两个。喜欢这个:

.qa {
  border-top: 1px solid #ccc;
}

第6个答案

如果可以 :after 在. qa 的父容器中添加伪元素 (请确保父容器设置为 position: relative;position: absolute; )

. Qa 父元素的 Css

{
    content: "";
    position: relative;
    bottom: 0;
    left:0;
    right:0;
    height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width)  */
    background: #fff; /* match this with your parent element background colour*/
}
第7个答案

我不喜欢添加规则, 当你知道你要立即覆盖它, 所以这里有一个略有不同的版本的 aridlehoover 的答案只有一个 css 规则。

.qa:not(:nth-child(-n+2)) {
  border-top: 1px solid #ccc;
}


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer


    Question
    Answer

相关问题

RegEx 匹配打开的标记, 但 XHTML 独立标记除外 PHP 邮件功能不能完成电子邮件的发送 如何从最后一行中的元素中删除边框? 如何设置 SVG 多边形的动画来填充? Br 标记可以具有哪些 CSS 属性? 什么是为多个边框编写 CSS 的好方法?[复制] 用环绕创建大小相等的 div 使用 CSS 将 DIV 居中不相等 Sass: 选择器的占位符行为