时间戳

首页 > 解决方案 > 我正在寻找一个内部

加下划线并填充剩余空间

标签

html - 我正在寻找一个内部

加下划线并填充剩余空间

标签

问题描述

我希望下划线<span class="line-sm"></span>填充剩余的<p>空间并有一个​​边框底部。

这是一个模型，红线是我想要的跨度：

我正在寻找的样机

如果窗口缩小，跨度也会缩小。有点像图像背景的“包含”。

这是我拥有的 HTML：

  <p>
    <strong>What ACT score do you want? <span class="line-sm"></span></strong> 
  </p>

如果不使用表格或一些疯狂的解决方法就可以做到这一点，有什么想法吗？

谢谢！

标签： htmlcss

解决方案

您可以使用 flexbox 来允许 span 增长以适应其父级。在这种情况下，我建议在 thestrong之前关闭标签。span

p {
  display: flex;
}

p .line-sm {
  flex: 1;
  margin-left: 10px;
  border-bottom: 1px solid red;
}
<p>
  <strong>What ACT score do you want?</strong>
  <span class="line-sm"></span>
</p>

如果你想确保跨度不会崩溃到消失，你可以添加一个min-width：

p {
  display: flex;
}

p .line-sm {
  flex: 1;
  min-width: 200px;
  margin-left: 10px;
  border-bottom: 1px solid red;
}
<p>
  <strong>What ACT score do you want?</strong>
  <span class="line-sm"></span>
</p>

推荐阅读