我需要制作一些HTML格式的表格，客户需要手工打印并输入一些条目，然后进行扫描或传真。
所以我希望有一个像“ Sign ____________”这样的签名区域
如果下划线的长度有限，那么下划线都很好，但是如果我有很多行需要贯穿页面（或者在某些情况下是表格单元格）并且每行前面都有一些文字，那该怎么办？
所以：
Item 1: ____________
An Item 2: _________
This is item 3: ____
1 more item: _______
问题是，如果我使用下划线，则下划线不能在相同的位置结束，并且看起来错误或扭曲了单元格的大小。最好的做法是在空白下划线，但这是不可能的。
因此，请使用border-bottom构建一些块元素。这些看起来像是下划线，您可以使用颜色，粗细等等。
一个务实的解决方案：我将每行设置为2列表格，为左列（带有文本）赋予0%的宽度（它将扩展到所需的最小值），并给右列（带有下划线的空白）的宽度为100%（将占用剩余的空间）；然后将一个带有底边框的空白块放到该右侧表格单元格中。
我的这种设计违反了许多其他Web设计师所持有的一些理想。我并不是说这是一个很棒的或非常符合标准的设计，我只是声称它很简单并且有效。
将其包装在<pre> tags </pre>中。
它将使用等宽字体，因此您的下划线“行”将在同一位置结束。您可能已经注意到上述问题中也发生了这种情况；-）
尝试使用类似的CSS规则
text-decoration: underline;
或
border-bottom: 1px solid black;
不久前，我试图自己找到解决方案。因此，关键是：
最好的办法是在空格下划线，但这是不可能的。
实际上是是可能，只是<u> </u>或<u> </u>。
这是表单的示例，其中字段彼此内联放置：
<div>
<nobr>
First name:
<u>            </u>
</nobr>
<nobr>
Last name:
<u>            </u>
</nobr>
<nobr>
Contact phone:
<u>            </u>
</nobr>
</div>这是一个表单示例，其中字段相互组织，并且___部分正确，受div的右键约束，并且不必进行不必要的包装：
<!DOCTYPE html>
<html>
<style>
myLn {
display: block;
width: 30%;
overflow: hidden;
white-space: nowrap;
}
</style>
<body>
<myLn>
Name:
<u>                                                              </u>
</myLn>
<myLn>
Address:
<u>                                                              </u>
</myLn>
<myLn>
More info:
<u>                                                              </u>
</myLn>
<myLn>
<u>                                                              </u>
</myLn>
</body>
</html> 希望有帮助。