html - HTML 内容的打印窗口出现不必要的左边距

Question

我正在通过 html 和 css 生成优惠券类型显示，而没有在服务器上创建和存储真实图像以节省空间。

计划是显示它并在用户想要打印时打印出来。我已经设法通过 HTML 和 css 创建布局，它显示如下，

但是当点击“立即打印”按钮时，左侧会出现很多空白区域，请看下图，

我不知道这里可能是什么问题，我在下面附上了 HTML 和 CSS。

HTML

<div class="print-coupon-text">
    <div class="pct-heading">
        <img src="***image-source***" alt="Created by JAiCOUPONS" />
    </div>
    <div class="pct-col pct-col-1">
        <div class="pct-store-logo">
            <img src="***image-source***" alt="Coupon Store" />
        </div>
        <div class="pct-store-desc">
            <span>http://abcdexample.com</span>
            <span>#2333, 1st Comfort Road</span>
            <span>Redint TF 78999</span>
            <span>210 Price Fork Road</span>
            <span>Redint TF 78999</span>
            <span>(333) 323-4444</span>
        </div>
    </div>
    <div class="pct-col pct-col-2">
        <span class="pct-offer-1">$50</span>
        <span class="pct-offer-2">Off</span>
        <span class="pct-offer-3"> Free Icecream </span>
    </div>
    <div class="pct-col pct-col-3">
        <span class="pct-title">Buy 1 Dinner</span>
        <span class="pct-title pct-title-end">And get the 2nd one Free</span>
        <span class="pct-desc">Dine In, Carryout Only</span>
        <span class="pct-desc">Excludes buffet with this coupon</span>
        <span class="pct-desc">Not Valid with other Offers</span>
        <span class="pct-desc">Expires : 15th Jan</span>
    </div>
    <div class="pct-footer">
        <span class="pct-footer-1">Contact JAiCOUPONS @ (972) 301-7898</span>
        <span class="pct-footer-2">Coupon ID **** | ©JAiCOUPONS.com</span>
    </div>
</div>

CSS

.print-coupon-text {
    position: relative;
    width: 100%;
    float: left;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px dashed #000;
    border-radius: 10px;
    font-size: 10px;
    text-align: left;
}
.pct-col {
    width: 30%;
    float: left;
    margin: 0 8px;
}
.pct-store-desc span, .pct-footer span, .pct-desc {
    display: block;
}
.pct-col.pct-col-2 {
    padding-left: 5px;
    padding-top: 85px;
}
.pct-col.pct-col-3 {
    padding-top: 40px;
}
.pct-offer-1 {
    font-size: 60px;
    font-weight: bold;
}
.pct-offer-2 {
    font-weight: bold;
}
.pct-offer-3 {
    display: block;
}
.pct-title {
    display: block;
    font-size: 13px;
}
.pct-title-end {
    border-bottom: 1px dotted;
    padding-bottom: 5px;
}
.pct-store-logo img {
    width: 150px;
    height: 85px;
}
.pct-heading {
    position: absolute;
    top: 0px;
    left: 28%;
}
.pct-heading img {
    width: 90%;
}
.pct-footer-1 {
    position: absolute;
    bottom: 16px;
    right: 6px;
}
.pct-footer-2 {
    position: absolute;
    bottom: 0px;
    right: 6px;
}

@media print {
    body * {
        visibility: hidden;
    }
    .print-coupon-text, .print-coupon-text * {
        visibility: visible;
    }
    .print-coupon-text {
        position: absolute;
        left: 0;
        top: 0;
    }
}

感谢任何帮助。

更新

初始显示即将弹出。

Answer 1

我认为你应该给你的 div.print-coupon-text 固定宽度

.print-coupon-text{
   width: 700px;  // or greater/less 
}