如何在CSS中用空格加下划线？ [英] How to underline blank space in CSS?

问题描述

我正在制作可从网络浏览器打印的报告。底部是一个字段，供收件人填写，因此下划线。我宁愿不必眼睁睁地看着一定数量的下划线，他们似乎在他们之间有差距。

I am making a report that should be printable from the web browser. At the bottom is a field for the recipient to fill in, so it's underlined. I would rather not have to eyeball a certain number of underscores, and they seem to have gaps in them anyway.

我要做的是...

付款金额：$ _ __ _ __ _ __ __ _ __ _ ___

Amount Paid: $ ___________________

到目前为止， ：

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

在父边缘绘制一行 div - 我想要的。但是，它还在金额支付：$下划了一行，我不想要。 p s， span s的每个组合我认为已失败：

That draws a line to the edge of the parent div - which I want. However, it also draws a line under "Amount Paid: $", which I don't want. Every combination of ps, spans, etc. I've thought of has failed:

如果我把文本放在边框的 span 中，那就没关系了，我想是因为它仍然是 p 并且边框仍然绘制。

If I put the text in a span that nukes the border, it doesn't matter, I suppose since it's still part of the p and the border is still drawn.

我可以在文本后面添加下划线，不工作。当边框样式位于 p 元素中时，它似乎只想强调空格。

I can add the underline to a span after text, but that doesn't work. It only seems to want to underline the blank space when the border style is in the p element.

如果我用 span 替换 p ，它不会得到应该扩展边框的备忘录：

Likewise, if I replace the p with a span it doesn't get the memo that it should extend the border all the way:

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

什么都不做。线不会被绘制。如果我添加一个字母到第二个跨度，它是绘制下，但没有更多。如果我用任何其他像div或跨度替换 p ，它似乎也不工作...

Does nothing. The line is never drawn. If I add a letter to the second span, it's drawn under that, but no more. And if I replace the p with anything else like divs or spans, it doesn't seem to work either...

任何想法？提前感谢。

推荐答案

将显示第二段到 inline-block 并设置其 width （CSS）。

Change the display (CSS) of the second span to inline-block and set its width (CSS).

upd：

或尝试类似：

<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>

这篇关于如何在CSS中用空格加下划线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！