html - 简单的 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 的原因)，而且我通常使用段落标记而不是像您使用的那样使用表格行。