页面打印的格式样式
我正在尝试创建一个用于打印标签的页面，但是当div转到下一页时，页面顶部与其内容之间存在间隙。但我不希望有任何差距。我尝试了不同的中断和其他方法，但是没有任何效果。有人可以帮忙吗？
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Label Printer</title>
<style>
body {
display: block;
max-width: 215.9mm;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
div {
width: 44.2%;
height: 37.125mm;
float: left;
border: 2px solid rgb(119, 205, 255);
border-radius: 20px;
margin-bottom: 30px;
margin-right: 2px;
margin-top: 10px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
p {
cursor: pointer;
padding-left: 20px;
}
</style>
<style media="print">
@page {
height: 305mm;
width: 215.9mm;
margin-top: 5mm;
margin-left: 0.6cm;
margin-right: 0;
margin-bottom: 0;
}
div {
border: 0px;
padding: 0;
margin: 0;
text-align: left;
}
p {
padding-left: 0;
border: none;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="dor div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag1">michael richardson<br>1 arbitrary road<br>coningsby
, Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag2">michael richardson<br>1 arbitrary road<br>coningsby
, Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag3">michael richardson<br>1 arbitrary road<br>coningsby
, Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div4" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag4">michael richardson<br>1 arbitrary road<br>coningsby
, Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div5" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag5">michael richardson<br>1 arbitrary road<br>coningsby
, Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div6" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag6">michael richardson<br>1 arbitrary road<br>coningsby
, Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div7" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag7">michael richardson<br>1 arbitrary road<br>coningsby
, Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div8" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag8">michael richardson<br>1 arbitrary road<br>coningsby
, Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div9" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag9">michael richardson<br>1 arbitrary road<br>coningsby
, Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div10" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag10">michael richardson<br>1 arbitrary
road<br>coningsby , Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div12" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag11">michael richardson<br>1 arbitrary
road<br>coningsby , Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div13" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag12">michael richardson<br>1 arbitrary
road<br>coningsby , Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div14" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag13">michael richardson<br>1 arbitrary
road<br>coningsby , Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div15" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag14">michael richardson<br>1 arbitrary
road<br>coningsby , Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div16" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag15">michael richardson<br>1 arbitrary
road<br>coningsby , Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div17" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag16">michael richardson<br>1 arbitrary
road<br>coningsby , Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div18" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag17">michael richardson<br>1 arbitrary
road<br>coningsby , Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div19" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag18">michael richardson<br>1 arbitrary
road<br>coningsby , Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div20" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag19">michael richardson<br>1 arbitrary
road<br>coningsby , Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div21" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag20">michael richardson<br>1 arbitrary
road<br>coningsby , Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div22" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="drag(event)" id="dor drag21">michael richardson<br>1 arbitrary
road<br>coningsby , Lincolnshire <br>IX14YY <br>United Kingdom<br></p>
</div>
<div id="dor div23" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dor div24" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dor div25" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dor div26" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dor div27" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dor div28" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dor div29" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dor div30" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dor div31" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dor div32" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dor div33" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dor div34" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function hider(id) {
var b = document.getElementById(id);
b.style.display = 'none';
}
</script>
</body>
</html>
这是我要用于其他所有页面的页面。
这是错误的
注意：有时可能会包含90到100 div（标签）。
1 个答案:
答案 0 :(得分：0)
我尝试了不同的中断和其他方法，但是没有用。
那是因为您正在使用float: left and print css doesnt like it
其中一种选择是使用inline-block
div {
float: none;
display: inline-block;
}
此后又出现另一个问题
也许在特定子项margin/height上的:nth-child(n)值操作可能会填补空白
这是我的浏览器的窍门，但我不保证所有浏览器的结果都相同
div:nth-child(15), div:nth-child(16) {
margin-top: -18.5px;
}
祝你好运！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？