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..

    How to place div in top right hand corner of page

    How to separate form with horizontal line

    How to make div to expand vertically without using overflow or javascript or hardcoded values such as margins

    How to scale image with with transition CSS? [closed]

    How to make CSS/HTML prototyping faster for engineers without strong CSS skills?

    How do I align a flow element next to a phrasing element?

    How To Create Full Screen Fixed With Scrolling Background Images

    How can I allow resizable() to increase size beyond initial size?

    How to change scroll bar position with CSS?

    HTML: How to add an image using CSS as linked style sheet

    How to float Dojo DropDownMenu over a table cell

    Flex: How to embed fonts with CSS

    How to get the text in the custom dialog to be centered vertically

    How to add CSS for specific pages in RefineryCMS?

    How can I target these children divs with one selector?

    jQuery wait for show()? Getting wrong data

    How to use printer friendly function with CTRL+p?

    How to make SVG clip-path work correctly in Google Chrome?

    How to create dynamic business listings in wordpress [closed]

    How do I float a div to the right of a title div without affecting the content of the title?

    How to make changeable themes using css and javascript

    How to program an
      image gallery, where the hover effect impacts more than 1 element? [closed]

    How to use custom field to add class to a post?

    How To Turn JS Objects To HTML And Style With CSS

    How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

    How to make the section and aside touch the footer?

    How to disable select box hover color on css

    How to make CSS apply to only a portion of the link_to text?

    How to add a line break inside with CSS?

    How to remove extra space under paragraph in HTML/CSS