html - 如何在一行上方打印文本？

Question

我必须制作一个收据页面的 UI，我必须在该页面上方打印文本。

这是一个示例图像：

使用text-decoration属性在文本下方显示下划线的选项不起作用，因为它仅在文本下方显示线条。我也尝试过设置border-bottom表格，但它也不起作用。

我需要做的是画一条很长的水平线，我可以在上面打印文本。我怎样才能达到这个愿望的结果？

我需要它与 IE > 7 兼容。

Answer 1

考虑使用input带有border-bottom样式声明的字段。此外，由于字段仅用于显示目的，您应该使用readonly属性设置它们，因此用户无法更改其内容。

例如：

HTML

<input type="text" value="some text goes here" readonly>
<input type="text" value="another field" readonly>
<input type="text" value="some more" readonly>
<input type="text" value="1234" readonly>

CSS

input {display:block;border:none;border-bottom:1px solid #000;}

参见jsFiddle 演示

请注意，字段的值应在包含在 HTML 中之前正确转义。例如，在 PHP 中，可以使用htmlspecialchars()orhtmlentities()函数对值进行转义。