我试图在两个文本元素之间添加一条线,例如下面的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>
我想添加一条像这样的图片。有人可以帮我吗?
答案 0 :(得分: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>
答案 1 :(得分:0)
您可以使用 flexbox 实现这一目标,您只需要多玩一些。
但这是一个简短的摘要:
.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>
答案 2 :(得分:0)
有多种方法可以实现此效果,但是一种方法是将两个<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 :(得分:-2)
您可以使用hr标签在HTML文本之间放置水平行。