Css 打印成纸质表格

我在考虑用打印样式表来填写预打印的纸质表格。假设你有一张像这样的纸：

Name: ________________________
Address: _____________________
City: ________________________
State: _______________________
Zip: _________________________
Favorite ice cream: __________

        John Smith
            1 Main St
          Springfield
           MA
          01002

我希望我的网页（带有打印样式表）如下所示：

Name: ________________________
Address: _____________________
City: ________________________
State: _______________________
Zip: _________________________
Favorite ice cream: __________

        John Smith
            1 Main St
          Springfield
           MA
          01002

当用户打印页面时，信息将填写纸质表单，如下所示：

Name: ___John Smith___________
Address: ___1 Main St_________
City: ___Springfield__________
State: ____MA_________________
Zip: ______01002______________
Favorite ice cream: __________

我们考虑这样做的原因是，我们已经有了大量的彩色纸张表单，我们只想在可能的情况下进行预填充。我们可能没有所有的信息（在上面的例子中，我们没有关于他们最喜欢的冰淇淋的信息）。因此，我们希望提交表单的人核实我们拥有的信息，并添加任何缺失的信息

有人用打印样式表做过吗？我只是自找麻烦吗？我真的应该在浏览器中复制整个表单（问题+答案）并将其全部打印在空白页上吗？谢谢

大卫

你想做的肯定比从头开始打印表单更乏味，但显然你不想浪费你已经拥有的打印资源是可以理解的

960网格系统(http://960.gs)是相当受欢迎的网站布局，虽然你使用它不一定就是它的目的，我认为它会有所帮助。您可以从下载所有960个网格系统资源

下载资源后，您将需要查找草图表文档的PDF版本。您可以将其覆盖在打印表单上（透明度有助于此），并确定如何布局您的网页以匹配所需的位置

接下来，您可以使用resources文件夹中的960网格系统演示代码开始布局

---

希望这会有所帮助

我猜你是自找麻烦，但你使用现有资源是正确的

---

在这种情况下，上下几个像素/点可能会使打印变得一团糟。。。使用CSS实现这一点可能相当困难（它有像素精度，但不面向页面，没有页面边距控制，等等）。如果我必须这样做（是的，这将是乏味的），我会使用一些像素精度报告生成器（如）并仔细对齐字段。

如果您对DIV绝对定位的使用感到满意，您可以利用CSS支持在打印样式表中以厘米为单位指定顶部、左侧、右侧、底部、宽度和高度

即：

您只需要测量表单，然后将所有div设置为现有表单上行的位置

当我试着自己做这件事时，我只是设置了一个嵌套无序列表的网格，标出一个5mm×5mm的网格，以帮助计算打印页面上的初始对齐，然后用尺子测量每个元素的尺寸。哦，您需要将页面（或div包装器）设置为相对位置

---

编辑-您可能还希望将div设置为将任何溢出设置为隐藏，这样您就不会在另一个字段中出现任何长的换行。

我不明白为什么通过一些尝试和错误无法做到这一点。正如@Richard所说，您可以使用

cm

作为单位。这将是乏味的，是的，但我相信这是可以做到的。特别是因为它只需要为一个特定的表单布局工作，而您有大量的表单布局可以在其上进行尝试