创建分隔元素顶部和底部的水平线

Question

我想做的是制作一个带有水平线的边框元素，其中包含顶部的图像和底部的文本。我不知道如何制作一个带有边框和水平线的div。

Answer 1

您所问的是如何在div的两个部分之间创建水平边框，我能想到的最简单的方法就是使用<hr />元素。你也可以通过垂直堆叠两个div来做到这一点，但我认为这是最简单的。

＆＃13;

＆＃13;

.split-box {
  border: black 1px solid;
  border-radius: 20px;
}

.split-box hr {
  border-width: 1px 0 0 0;
  border-color: black;
  margin: 0;
}

.split-text {
  padding: 10px;
}

＆＃13;

<div class="split-box">
  <div class="split-text">
    Top part of box
  </div>
  <hr />
  <div class="split-text">
    Bottom part of box
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

您可以运行上面的代码段来查看此操作。