html - 由边框分隔的 2 个 div

Question

我正在尝试创建两个居中的 div，它们由这样的边框分隔。

不知道如何在两个 div 之间插入边框。这两个 div 是可点击的。

.homescreen-content {
    display: flex; 
    flex-direction: column; 
    max-height: 100% !important; 
  }
.goto {
    margin-top:20%;
    left:0;
    height: 100% ;
    width: 100% !important;
    background-color: green;
    text-align: center;
}

.no {
    left:0;
    height: 100%;
   width: 100% !important;
    background-color: red;
    text-align: center;
}

<div class="homescreen-content" scroll="false">
  <div (click)="open()" class="goto">
      <h2>TITLE 1 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
  <hr class="border">
  <div (click)="open()" class="no">
      <h2>TITLE 2 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
</div>

标签： htmlcss

Answer 1

正如 Fabio 所提到的，您可以将您的<hr>标签替换为 a<div>并将 的高度设置为<div>您想要的边框的厚度。

.homescreen-content {
    display: flex; 
    flex-direction: column; 
    max-height: 100% !important; 
  }
.goto {
    margin-top:20%;
    left:0;
    height: 100% ;
    width: 100% !important;
    background-color: green;
    text-align: center;
}

.no {
    left:0;
    height: 100%;
   width: 100% !important;
    background-color: red;
    text-align: center;
}

.border {
    width:100%;
    height:10px;
    background:blue;
}

<div class="homescreen-content" scroll="false">
  <div (click)="open()" class="goto">
      <h2>TITLE 1 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
  <div class="border"></div>
  <div (click)="open()" class="no">
      <h2>TITLE 2 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
</div>