如何打印一行以上的文字？

Question

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

以下是一个示例图片：

使用text-decoration属性在文本下方显示下划线的选项无效，因为它只显示文本下方的行。我也试过设置表的border-bottom，但它也没有工作。

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

我需要它是IE＆gt; 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 demo

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