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

Question

我正在制作一个可以从Web浏览器打印的报告。底部有一个供收件人填写的字段，因此需要用下划线来标记。我不想去数空格或者下划线的数量，因为它们似乎总是不对齐。

我希望得到的效果是：

已付款金额：$___________________

到目前为止，我已经使用以下CSS：

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

那会在父级div的边缘处画一条线 - 这正是我想要的。然而，它也会在"Amount Paid: $"下面画一条线，这不是我想要的。我想过所有可能的组合，例如使用p标签、span标签等，但都失败了：

如果我把文本放在一个隐藏边框的span标签中，这样做无济于事，因为它仍然是p标签的一部分，边框仍然会被画出来。

我可以将下划线添加到文本后面的一个span标签中，但那行不通。它只想在p元素中的空白处划下划线，当边框样式在p元素中时。

同样地，如果我用span元素替换p元素，它就不会获得应该一直延伸到边缘的提示：

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

没有任何作用。这条线永远不会被画出来。如果我在第二个中添加一个字母，则该条线将被画在那个字母下面，但是不会继续画下去。如果我将p替换为其他任何元素，如

或者，它似乎也无法工作...

有什么想法吗？提前致谢。

- Andrew

---

你可能遇到了其中一个语义上有效甚至是鼓励使用表格的情况。你正在处理表格数据吗？（例如一系列带有总计的交易）。 - zzzzBov

我想你是对的，这确实是表格数据...只有三行而已。原始报告中的下划线延伸到列结束的左侧，所以我放弃了它，而不是处理colspans等等...但我也可以尝试一下。 - Andrew

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

---

工作得相当不错，尽管我必须设置宽度。本来希望它能够扩展到剩余的大小标签，但我可以让它工作。 - Andrew

@Andrew：在这种情况下，您可以尝试将父级div和span的display更改为分别为table和table-cell。实际上，最近我也遇到了类似的问题，并且通过调整display属性解决了它。 - Lyubomyr Shaydariv

我决定使用inline-block，因为它比添加表格单元格更加“纯粹”，而且我找到了一个适合的宽度。谢谢 :) - Andrew

Answer 2

这在2014年可以正常工作。

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

- Theophilus

---

优点是，它看起来像普通的下划线（在打印或生成PDF时）。比Chrome中的1像素边框略细。 - Sam Watkins

一个简洁而优雅的句子。最佳解决方案。 - undefined

Answer 3

另一种解决方案是使用 display: 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>

- Igor Alemasow

---

完美运作，尤其适用于使用下划线填充剩余空间。 - Liovareg

Answer 4

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

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

- thirtydot

Answer 5

如果您不担心对旧浏览器（IE6）的支持，可以始终使用min-width属性来获取默认空白空间并根据需要进行扩展。

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

请注意，对于IE7，您需要将overflow: visible添加到min-width元素中，以使其正确处理min-width，而不是将其视为宽度的默认（有缺陷的）行为。

- TheQ

---

这也是一个很好的答案。但是在谷歌浏览器中，只有在将span的display设置为inline-block之后，才能应用min-width。 - Lyubomyr Shaydariv

@Lyu 确实如此，尽管仅根据描述，他不应该仅限于使用 '<span>' 标签，而且可以很容易地解决。 - TheQ

Answer 6

或者只需像这样添加不间断空格字符：

<h1>STRONG&#160;&#160;&#160;</h1>

CSS：

h1 {
  text-decoration: underline;
}

添加任意数量的下划线以增加宽度。

- Artur Müller Romanov