如何在文本元素之间添加水平线答案

【问题标题】：How to add horizontal line between text elements如何在文本元素之间添加水平线
【发布时间】：2020-08-15 13:44:58
【问题描述】：

我试图在两个文本元素之间添加一条线，如下图 HTML 中的图片，但我不能。我只能在“培训计划”之间添加一行，其他文本将在下一行。

h3 {
    position: relative;
}

h3 span {
    background-color: white;
    padding-right: 10px;
}

h3:before {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5em;
    width: 60%;
    border-top: 1px solid black;
    z-index: -1;
}

<h3 style="font-family:Montserrat"><span>Training program</span></h3>
<h3 style="font-family:Montserrat; text-align:right; margin-top:10px"><span>Read more</span></h3>

我想像这张图片一样添加一行。有人可以帮帮我吗？

【问题讨论】：

标签： html css frontend web-frontend

【解决方案1】：

您可以使用 flexbox 轻松做到这一点。

h3{
  font-family:Montserrat
}
.flex-parent{display:flex;}
.line-div{
  flex: 1; /* flex-grow */
  padding: 0 5px;
}
.the-line{
  height: 50%;
  border-bottom:1px solid #bbb;
}

<div class="flex-parent">
  <h3><span>Training program</span></h3>
  <div class="line-div"><div class="the-line"></div></div>
  <h3><span>Read more</span></h3>
</div>

参考资料：

Excellent flexbox cheatsheet

Excellenter short Video Tutorial

【讨论】：

我同意 flexbox 是一个很好的方法。但是，为什么要使用像这样的实际元素：<div class="line-div"><div class="the-line"></div></div>？一个或多个伪元素难道不是更好的选择吗？

【解决方案2】：

有多种方法可以实现此效果，但一种方法是将两个<h3> 元素包含在<div> 中，然后将border-bottom 应用到。

然后，当您将标题推到低于它们通常显示的位置时（使用垂直平移 transform: translateY()），border-bottom 现在将出现在两个标题之间，而不是沿着它们下方运行。

工作示例：

.heading-group {
display: flow-root;
border-bottom: 1px solid rgb(191, 191, 191);
}

.heading {
 padding: 0 6px;
 background-color: rgb(255, 255, 255);
 transform: translateY(27px);
}

.training {
 float: left;
}

.read-more {
 float: right;
}

<div class="heading-group">
<h3 class="heading training">Training program</h3>
<h3 class="heading read-more">Read more</h3>
</div>

【讨论】：

【解决方案3】：

您可以使用 flexbox 来实现这一点，您只需要多玩一点。

但这里有一个快速的 sn-p：

.flex {
  display: flex;
  align-items: center;
}

h3 {
  font-family:Montserrat;
}

.line {
  height: 0;
  margin: 0 10px;
  border-top: 1px solid black;
  width: 40%;

}

<div class="flex">
  <h3>Training program</h3>
  <div class="line"></div>
  <h3><span>Read more</span></h3>
</div>

【讨论】：

【解决方案4】：

您可以使用 hr 标签在 html 文本之间放置水平行。

【讨论】：