如何在CSS中加下空格？

Question

我正在制作一份应该可以从网络浏览器打印的报告.在底部是收件人填写的字段,因此它带有下划线.我宁愿不必注意一定数量的下划线,无论如何它们似乎都有间隙.

我想要的是......

支付金额:$ _ __ _ __ _ __ _ __ _ __ _ ___

到目前为止,我已经管理了这个CSS:

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

这画了一条线到父母的边缘div- 我想要的.但是,它也在"Amount Paid:$"下画了一条线,这是我不想要的.我认为ps,spans等的每个组合都失败了:

如果我把文字放在一个span核对边框的地方,那没关系,我想因为它仍然是其中的一部分p而且仍然绘制了边框.

我可以在文本后面添加下划线,但这不起作用.当边框样式位于p元素中时,似乎只想要为空格加下划线.

同样,如果我p用a 替换span它不会得到它应该一直扩展边框的备忘录:

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

什么也没做.该线永远不会被绘制.如果我在第二个跨度中添加一个字母,则会在此下面绘制,但不会更多.如果我替换p其他任何东西,如div或跨度,它似乎也不起作用......

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

Answer 1

display将第二个跨度的(CSS)更改为inline-block并设置其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>

Answer 2

这适用于2014年.

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

Answer 3

另一种解决方案使用disply: flex;和flex-grow：

.container {
    width: 200px;
}

.row {
    display: flex;
}

.underline {
    flex-grow: 1;
    border-bottom: 1px solid black;
    margin-left: 5px;
}

<div class='container'>
    <div class='row'>
        <div class='label'>Count:</div>
        <div class='underline'></div>
    </div>
    <div class='row'>
        <div class='label'>Amount Paid:</div>
        <div class='underline'></div>
    </div>
</div>

Answer 4

如果您不介意手动指定线的宽度，您可以这样做：

<span style="border-bottom: 1px solid black; padding-left: 50px">&nbsp;</span>