How to underline blank space in CSS?


Tags: html,css

Problem :

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 ps, spans, 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.



Solution :

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>

    CSS Howto..

    Sitefinity 5.3: How do I order my CSS?

    How can I correctly center this div into its container? What is wrong?

    How can I rotate a font icon 45 degrees?

    How to center text based on only one of two merged cells ? html/css

    How to stylize second level dropdown menu list

    how to make textarea looks like input[text] on form invalid

    How to style a XUL textbox with CSS :focus

    Css - How to override css for a table cell

    How to create a ribbon shape in CSS

    Selenium: how to define css if webpage has mutiple elements with same name

    How to show the scaled image and text in the view port without scrollbar?

    HTML/CSS Fluid Grid: How to overlay div to another div

    How to write regex to extract specific key format and value from CSS file?

    How can I change the image folder name in css files dynamically?

    How to write this :not “in other element” CSS rule?

    In jQuery, how do I animate the “max-height” CSS property?

    How do I detect box-sizing border-box support with Modernizr

    CSS - how to style a footer

    HTML/CSS — How to add a selected state

    how to avoid css jitters while applying css border with hover pseudo class

    How to show color only to the first li?

    How can I change the number of columns in the product list?

    How to force the horizontal scroll bar to appear?

    How to show a small image to the right of a div with CSS?

    CSS, how to add picture in the corner of every columns

    How to dynamically change CSS using JS

    select tag in Google Chrome shows lowercase options

    How do I fix my css floats on IE 6 & 7? Or how can I lay this out better?

    How is better to do with CSS sprites [closed]

    How to convert all color code #XXYYZZ to shorter 3 character version #XYZ of whole css file?