如何在 CSS 中给空格加下划线？

Question

我正在制作一份应该可以从网络浏览器打印的报告。底部是供收件人填写的字段，因此带有下划线。我宁愿不必盯着一定数量的下划线，而且它们似乎无论如何都有差距。

我要去的是…

支付金额：$ ___ __ ___ __ ___ __ ___ __ ___ __ ___ ___

到目前为止，我已经管理了这个 CSS：

 <div>
    <p style="border-bottom: 1px solid black;">
        Amount Paid: $
    </p>
</div>

这在父级的边缘画了一条线 div 我想要的。但是，它还在“支付金额：$”下画了一条线，这是我不想要的。 p s， span s 等的每个组合。我想过的都失败了：

如果我将文本放在 span 中，那将破坏边界，没关系，我想因为它仍然是 p 的一部分并且边界仍然被绘制。

我可以将下划线添加到文本后的跨度中，但这不起作用。当边框样式在 p 元素中时，它似乎只想强调空格。

同样，如果我将 p 替换为 span 它不会得到应该一直扩展边界的备忘录：

 <p>
    <span>Amount Paid: $ </span>
    <span style="border-bottom: 1px solid black;"> </span>
</p>

什么也没做。永远不会画线。如果我在第二个跨度中添加一个字母，它就会被绘制在那个下面，但不会再多了。如果我将 p 替换为 div 或 span 之类的任何其他内容，它似乎也不起作用……

有任何想法吗？提前致谢。

原文由 Andrew 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将第二个跨度的 display （CSS）更改为 inline-block 并设置其 width （CSS）。

更新：

或者尝试类似的东西：

 <p style="width: 200px; display: table;">
  <span style="display: table-cell; width: 100px;">Amount Paid: $ </span>
  <span style="display: table-cell; border-bottom: 1px solid black;"></span>
</p>

原文由 Lyubomyr Shaydariv 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这适用于 2014 年。

 Amount Paid: $ <span style="text-decoration: underline; white-space: pre;">                   </span>

原文由 Theophilus 发布，翻译遵循 CC BY-SA 4.0 许可协议