Geek Answers Handbook

Light HTML underline

I am creating a form in HTML to be printed, with fields to be written by the recipient. Basically, I want this one line that extends from the end of the field label towards the page. Here's how I do it right now:

<table width="100%">
    <tr>
        <td width="1%">
            Label:
        </td>
        <td style="border-bottom-style:solid; border-bottom-width:1px;">
            &nbsp;
        </td>
    </tr>
</table>

This works, but there should be an easier way to do this without having to use an entire table element. Any ideas?

+5
source share
4 answers

I think your decision is better than the answers so far. The only thing I changed in your solution is that I would use the css class instead of the built-in.

Your decision will have better alignment than using spaces. Your code will look cleaner with table elements than with spans.

, , .

+4

CSS:

span.print_underline
{
    display: inline-block;
    height: 1em;
    border-bottom: 1px solid #000;
}

, HTML :

<span class="print_underline" style="width: 200px">&nbsp;</span>

, , , .

, div span, . , , div ( ), , .

+8

span?

<span style="border-bottom....">Text</span>
+3

div . .

:

label {
    float: left;
}

div {
    margin-left: 10em;
    border-bottom: 1px solid black;
    height: 1em;
}

<label>label:</label>

<div></div>

it will not stretch the entire width between the label and the right side, but you can make the label hide the bottom border (using a background color or something like that) and expand the div to the right as well as (without a margin).

If you want the correct semantics, you can only use the input, not the div, set it to "block" and fix the borders and background.

+2
source

More articles:


All Articles