Html 如何在 CSS 中给空格加下划线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4513388/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to underline blank space in CSS?
提问by Andrew
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.
我正在制作一份应该可以从网络浏览器打印的报告。底部是收件人填写的字段，因此它带有下划线。我宁愿不必关注一定数量的下划线，无论如何它们似乎都有间隙。
What I am going for is...
我要去的是...
Amount Paid: $ ___________________
支付金额：$ ___ ___ ___ ___ ___ ____
So far, I have managed this CSS:
到目前为止，我已经管理了这个 CSS：
<div>
<p style="border-bottom: 1px solid black;">
Amount Paid: $
</p>
</div>
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:
这在父级的边缘画了一条线div——这是我想要的。但是，它也在“支付金额：$”下画了一条线，这是我不想要的。我想到的ps、spans 等的每个组合都失败了：
If I put the text in a spanthat nukes the border, it doesn't matter, I suppose since it's still part of the pand the border is still drawn.
如果我将文本放在spannukes 边框中，那没关系，我想因为它仍然是 的一部分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 pelement.
我可以在文本后的跨度中添加下划线，但这不起作用。当边框样式在p元素中时，它似乎只想在空白处加下划线。
Likewise, if I replace the pwith a spanit doesn't get the memo that it should extend the border all the way:
同样，如果我p用 a替换span它，它不会得到它应该一直扩展边框的备忘录：
<p>
<span>Amount Paid: $ </span>
<span style="border-bottom: 1px solid black;"> </span>
</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 pwith anything else like divs or spans, it doesn't seem to work either...
什么也没做。永远不会画线。如果我在第二个跨度中添加一个字母，它会在其下方绘制，但不会更多。如果我用pdiv 或 spans 之类的任何东西替换它，它似乎也不起作用......
Any ideas? Thanks in advance.
有任何想法吗？提前致谢。
采纳答案by Lyubomyr Shaydariv
Change the display(CSS) of the second span to inline-blockand set its width(CSS).
display将第二个跨度的(CSS)更改为inline-block并设置其width(CSS)。
upd:
更新：
Or try something like:
或者尝试类似的事情：
<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>回答by Theophilus
This works in the year 2014.
这在 2014 年有效。
Amount Paid: $ <span style="text-decoration: underline; white-space: pre;"> </span>回答by TheQ
If you're not worried about support for older browsers (IE6 generation), there's always using the min-width property to get a default amount of blank space that expands as necessary.
如果您不担心对旧浏览器（IE6 代）的支持，那么总是使用 min-width 属性来获得默认的空白空间，并根据需要进行扩展。
<p>
<span>Amount Paid: $ </span>
<span style="border-bottom: 1px solid black; min-width: 100px;"> </span>
</p>
Note that for IE7, you'd have to add an overflow: visibleto the min-width element so that it treats min-width properly, as opposed to it's default (buggy) behavior of treating it as width.
请注意，对于 IE7，您必须向overflow: visiblemin-width 元素添加 ，以便它正确处理 min-width ，而不是将其视为宽度的默认（错误）行为。
回答by Igor Alemasow
Another one solution using disply: flex;and flex-grow:
使用disply: flex;and 的另一种解决方案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>回答by thirtydot
If you don't mind manually specifying the width of the line, you can do this:
如果您不介意手动指定线宽，您可以这样做：
<span style="border-bottom: 1px solid black; padding-left: 50px"> </span>
