asp.net - 我如何为我需要在 8.5 x 11 尺寸页面上打印的标签创建 css？

Question

我如何为这种需求创建 css？

自定义标签字段的尺寸:

Top Margin: 0”
Side Margin: 0” 
Vertical Pitch: 3”
Horizontal Pitch: 4”
Page Size: 8.5 x 11

Label Height: 3”
Label Width: 4” 
Number Across: 2
Number Down: 3

PAGE Top Margin: 2” 
PAGE Side Margin: .5” 

这创建了向后的 L 形，允许我们的穿孔边距。

下面是我要调整上面设置的代码

<div>
   <%#Eval("FirstName")%> <%#Eval("LastName")%> <br />
   <%#Eval("RoleName")%><br />
   <%#Eval("School")%><br />
   <asp:Image ID="Image8"  Width="190" Visible='<%# Eval("ProgWellness")%>' runat="server" ToolTip="Member of the Wellness Advisory Council" ImageUrl="~/DesktopModules/ThirdI.EventBooking/images/dnnp_Advisory.png" />
   <br />
   <asp:Image ID="Image9" Visible='<%# Eval("ProgEssMax")%>' runat="server" ToolTip="Certified in Maximized Mind"  ImageUrl="~/DesktopModules/ThirdI.EventBooking/images/dnnp_MaxMind.png" />
   <asp:Image ID="Image10" Visible='<%# Eval("ProgEssNerve")%>' runat="server" ToolTip="Certified in Maximized Nerve Supply" ImageUrl="~/DesktopModules/ThirdI.EventBooking/images/dnnp_NerveSupply.png" />
   <asp:Image ID="Image11" Visible='<%# Eval("ProgEssWellness")%>' runat="server" ToolTip="Certified in Maximized Nutrition" ImageUrl="~/DesktopModules/ThirdI.EventBooking/images/dnnp_Nutrition.png" />
   <asp:Image ID="Image12" Visible='<%# Eval("ProgEssOxygen")%>' runat="server" ToolTip="Certified in Maximized Oxygen and Lean Muscle" ImageUrl="~/DesktopModules/ThirdI.EventBooking/images/dnnp_Excercise.png" />
   <asp:Image ID="Image13" Visible='<%# Eval("ProgEssBodyToxin")%>' runat="server" ToolTip="Certified in Minimized Toxins"  ImageUrl="~/DesktopModules/ThirdI.EventBooking/images/dnnp_Toxicity.png" />
   <asp:Image ID="Image14" Visible='<%# Eval("ProgMLHealthCenter")%>' runat="server" ToolTip="Certified in Minimized Toxins" ImageUrl="~/DesktopModules/ThirdI.EventBooking/images/dnnp_HealthCenter.png" />
</div>

我想将上面代码的打印输出为 8.5 x 11 的页面大小，并给出尺寸，我该如何进行设置？ 另外，我想要在 8.5 x 11 大小的页面上使用上述大小的 6 个标签。

Answer 1

基本上 CSS 支持这一点。您可以使用英寸作为测量单位(width: 4in)并允许设置页面的页边距(参见 http://www.w3.org/TR/CSS21/page.html )。然而，浏览器对后者的支持并不是很广泛。例如 Firefox/Mozilla 没有，自 IE8 以来的 IE 等。因此您需要测试它。

所以在你的情况下，你可能会从这样的事情开始:

@page {
  margin-top: 2in;
  margin-left: .5in;
}

div {
  width: 4in;
  height: 3in;
}

否则它与任何其他 CSS 没有什么不同。