Question

在用HTML格式制作转换为PDF格式的表格时，我才意识到没有为签名设计的实线。

据我所知，我不知道支持它的HTML标记。最接近的是HR，但我无法通过CSS将其移到底部。另一种选择是使用TD底边作为实心1px黑色，但它不传达任何语义。

如果我使用下划线，我会看到下划线之间的空隙很小。

有什么建议吗？

Answer 1

为什么不使用输入？这样，您就可以获得正确的语义。例如，屏幕阅读器将理解用户应该提交信息。

.signature {
    border: 0;
    border-bottom: 1px solid #000;
}

<input type="text" class="signature" />

Answer 2

你可以创建一个输入标签，然后设置它的样式，使它只在底部有一个边框

{{1}}

Simple codepen to illustrate the idea

编辑：刚刚注意到其他人在我输入时发布了相同的解决方案。这些答案的所有支持都是什么？

Answer 3

您可以采取一些措施来实现这一目标。第一个选项是带border-bottom的div，但不可编辑。这可以在这里看到：

＆＃13;

#signaturename {
  text-align: center;
  font-weight: bold;
  font-size: 150%;
}

#signature {
  width: 100%;
  border-bottom: 1px solid black;
  height: 30px;
}

＆＃13;

<div id="signaturename">
  Signature:
</div>

<div id="signature">
</div>

＆＃13;

可编辑的秒选项只是一个简单的输入框：

＆＃13;

#signaturetitle {
  font-weight: bold;
  text-align: center;
  font-size: 150%;
}

#signature {
  width: 100%;
  border: 0px;
  border-bottom: 1px solid black;
  height: 30px;
}

＆＃13;

<div id="signaturetitle">
  Signature:
</div>

<input type="text" id="signature">

＆＃13;

修改

现在只想到另一种方法来实现你想要的！：）

您可以使用_，但是会有空格吗？错，有一个解决方法！在这里查看：

＆＃13;
＆＃13;
#signaturetitle { text-align: center; font-weight: bold; font-size: 200%; } #signature { text-align: center; height: 30px; word-spacing: 1px; }
＆＃13;
<div id="signaturetitle"> Signature: </div> <div id="signature"> ______________________________ </div>
＆＃13;
＆＃13;
＆＃13;

正如您所看到的，我只是添加CSS属性word-spacing。

什么是正确的HTML用于签名行？

3 个答案:

修改