简单的HTML下划线

Question

我正在创建一个将打印的HTML表单,其中包含需要由收件人写入的字段.基本上我想要的是一条从字段标签末端延伸到页面一侧的单行.这就是我现在正在做的事情:

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

这是有效的,但必须有一个更简单的方法来做到这一点,而不需要一个完整的表元素.有任何想法吗？

Answer 1

这是我的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在语义上是不正确的(这就是我使用span的原因),我通常使用段落标记而不是像你使用的那样使用表格行.

Answer 2

我认为您的解决方案比迄今为止的答复更好。我对你的解决方案唯一要改变的是我会使用 css 类而不是内联类。

您的解决方案比使用跨度具有更好的对齐效果。使用表格元素的代码看起来比使用跨度的代码更干净。

此外，您可能需要考虑在单元格中放入一个文本框，以便用户可以在打印之前直接在页面上输入信息。