I am creating a form in HTML that will be printed, with fields that need to be written in by the recipient. Basically what I want is a single line that stretches from the end of the field label to the side of the page. Here's how I'm doing it right now:
<table width="100%">
<tr>
<td width="1%">
Label:
</td>
<td style="border-bottom-style:solid; border-bottom-width:1px;">
</td>
</tr>
</table>
This works, but there must be an easier way to do this without needing a whole table element. Any ideas?
Here's my CSS:
span.print_underline
{
display: inline-block;
height: 1em;
border-bottom: 1px solid #000;
}
So your HTML will look like:
<span class="print_underline" style="width: 200px"> </span>
I left the width out, so I could reuse it as much as I want, but you can specify the width.
As a sidenote, I tested the same concept with a div tag instead of span tag, and it did not work in some situations. This is probably because it is semantically incorrect to put a div within a paragraph tag (which is why I used a span), and I generally use paragraph tags instead of using table rows like you've used.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With