如何从最后一行的元素中删除边框? [英] How to remove border from elements in the last row?

问题描述

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

My layout is something like this (I'm typing a simplified version with inline styles instead of classes)

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

<div style="display: flex; flex-wrap: wrap; flex-direction: row">
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
</div>

这基本上呈现出以下内容:

This basically renders something like this:

我的问题是:

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

推荐答案

您可以为元素添加负底边距，然后隐藏上溢.这将隐藏不需要的边框.

You can add a negative bottom margin to your elements then hide the overflow. This will hide the unwanted borders.

.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%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;
}

<div class="wrapper">
  <div class="qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
</div>

即使一行中的元素数不同于2:

This trick should work even if the number of element in a row is different from 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%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;
}

<div class="wrapper">
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
</div>

它还可以与响应式布局一起使用，在该布局中，小屏幕上的列数可以更改:

It will also work with a reponsive layout where the number of columns can change on small screens:

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

@media all and (max-width:800px) {
  .qa {
    flex:1 1 30%;
  }
}

@media all and (max-width:400px) {
  .qa {
    flex:1 1 40%;
  }
}

<div class="wrapper">
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
</div>

这篇关于如何从最后一行的元素中删除边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！