时间戳

首页 > 解决方案 > 标题后的线条和图像，自动计算线条宽度以填满容器

jquery - 标题后的线条和图像，自动计算线条宽度以填满容器

问题描述

我需要开发一个看起来像这样的标题。在此处输入图像描述

图像将与标题保持在同一行，但位于容器的末尾。一条线掩盖了两者之间的差距，这也是响应式的。

我可以知道我可以用css吗？附有我没有这样做的代码笔。 https://codepen.io/rae0724/pen/aboyPWY

<h1>Home</h1>

h1 {
  overflow: hidden;
}
h1:after {
  display: inline-block;
  content: "";
  border-top: 1px solid #000;
  width: 100%;
  background-image: url(https://image.flaticon.com/icons/svg/25/25694.svg);
  background-size:30px auto;
}

谢谢你。

标签： jqueryhtmlcssline

解决方案

这应该有效：

<div class="wrapper">
  <h1>Home</h1>
  <div class="line"></div>
  <img src="https://image.flaticon.com/icons/svg/25/25694.svg" alt="">
</div>

我使用了弹性盒：

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
}

.wrapper img {
  height: inherit;
}

.line {
  flex: 1 100%;
  border-top: 1px solid #000;
  margin: 0 40px;
}

推荐阅读