问题
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:
<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 p
s, span
s, etc. I've thought of has failed:
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.
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.
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>
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...
Any ideas? Thanks in advance.
回答1:
Change the display
(CSS) of the second span to inline-block
and set its 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>
回答2:
This works in the year 2014.
Amount Paid: $ <span style="text-decoration: underline; white-space: pre;"> </span>
回答3:
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.
<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: visible
to the min-width element so that it treats min-width properly, as opposed to it's default (buggy) behavior of treating it as width.
回答4:
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>
回答5:
Another one solution using 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>
来源:https://stackoverflow.com/questions/4513388/how-to-underline-blank-space-in-css