我正在尝试从连接到网站的数据库生成邮件列表标签(是的，我可以获取某种文本格式的列表并导入到 Word 之类的东西中......但最终我不会准备邮寄，所以我希望过程中的步骤尽可能少!)。除了一个部分，我已经设法使其正常工作:标签没有正确垂直放置。
在过去的几个小时里，我查看了很多关于 SO 的问题，但没有一个问题(或解决方案)与我所得到的完全匹配。
我已经为页面上的 3 个标签定义了 3 个不同的段落类(我们要打印的标签中有奇怪的间隙)，尺寸基于标签位置和大小。每个标签都是包含 3 个类之一的单个段落，标签库位于代表页面的 div 内(这些考虑了页面的顶部和底部边距)。
在水平方向上，它工作正常；垂直是另一回事。 Firebug 显示段落重叠。我对发生的事情感到困惑。
这是 CSS:
body
{
color: Black;
background-color: White;
font-family: "Times New Roman", Times, serif;
height: 100%;
margin: 0;
padding: 0;
font-size: 11pt;
}
p.print_label_left, p.print_label_right, p.print_label_middle
{
background: white;
position: absolute;
width: 5.4cm;
height: 1.43cm;
max-height: 1.43cm;
min-height: 1.43cm;
margin-left: 0.5cm;
margin-top: 1.48cm;
margin-right: 0.5cm;
margin-bottom: 0.5cm;
padding: 0.5cm;
top: 0;
border: none;
outline: solid 1px black;
}
p.print_label_left
{
left: 0.65cm;
}
p.print_label_middle
{
left: 7.3cm;
}
p.print_label_right
{
left: 13.95cm;
}
div.print_page
{
background: white;
position: relative;
padding: 0;
margin: 0;
left: 0;
top: 0;
width: 21cm;
height: 29.7cm;
border: none;
}
这是一个有代表性的 HTML 示例(由于隐私原因，我不能提供真实的东西):
<body>
<div class="print_page" style="top:-1.33333333333cm;">
<p class="print_label_left" style="top:0cm;">A<br />
B<br />
C<br />
<br />
<br />
<br />
</p>
<p class="print_label_middle" style="top:0cm;">D<br />
E<br />
F<br />
<br />
<br />
<br />
</p>
<p class="print_label_right" style="top:0cm;">G<br />
H<br />
I<br />
<br />
<br />
<br />
</p>
<p class="print_label_left" style="top:2.43cm;">J<br />
K<br />
L<br />
<br />
<br />
<br />
</p>
<p class="print_label_middle" style="top:2.43cm;">M<br />
N<br />
O<br />
<br />
<br />
<br />
</p>
<p class="print_label_right" style="top:2.43cm;">P<br />
Q<br />
R<br />
<br />
<br />
<br />
</p>
</div>
</body>
header 定义了一个文档类型(xhtml transitional 1.0)，我尝试了最大高度和最小高度，并在每个段落中添加了额外的行以试图强制它有足够的内容来填写文本，但没有这样的运气。
当我打印出列表时，轮廓表明方框的间距为 2 厘米，而不是所需的 2.43 厘米。我对要搜索的东西一无所知!
如果有帮助，我在 Windows 7 x64 机器上使用 Firefox 36，但我运行它的服务器是典型的 LAMP 设置。
最佳答案
如果我理解了你的问题，它应该有用吗？
body
{
color: Black;
background-color: White;
font-family: "Times New Roman", Times, serif;
height: 100%;
margin: 0;
padding: 0;
font-size: 11pt;
}
p.print_label_left, p.print_label_right, p.print_label_middle
{
background: white;
width: 300px;
height: 100px;
margin-top: 10px;
padding: 0.5px;
top: 10px;
border: none;
outline: solid 1px black;
}
p.print_label_left
{
margin-left: 10px;
}
p.print_label_middle
{
margin-left: 150px;
}
p.print_label_right
{
margin-left: 300px;
}
div.print_page
{
background: white;
padding: 0;
margin: 5px;
left: 0;
top: 0;
width: 500px;
height: 100px;
border: none;
outline: solid 5px Red;
}<div class="print_page">
<p class="print_label_left">A<br />
B<br />
C<br />
</p>
<p class="print_label_middle">D<br />
E<br />
F<br />
</p>
<p class="print_label_right">G<br />
H<br />
I<br />
</p>
<p class="print_label_left">J<br />
K<br />
L<br />
</p>
<p class="print_label_middle">M<br />
N<br />
O<br />
</p>关于html - CSS 绝对位置没有放在正确的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30709947/