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

时间：2017-12-30 04:12:06

标签： html css printing

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

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

HTML View

但是当点击“立即打印”按钮时，左侧会产生很多空白区域，请参阅下图，

Print View

我无法弄清楚这里可能存在什么问题，我在下面附上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;
    }
}

感谢任何帮助。

更新

初次显示弹出窗口。

2 个答案:

答案 0 :(得分：0)

我认为你应该为你的div.print-coupon-text

提供固定的宽度 
.print-coupon-text{
   width: 700px;  // or greater/less 
}

答案 1 :(得分：0)

您可以尝试在自己的页面中显示优惠券，在这种情况下您不会遇到此问题。检查下面的截图。 html page print page

顺便说一句，我无法复制你的问题，使用你的代码工作正常。

编辑::尝试使用Bootstrap Popup，工作正常。 

.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;
            }
        }
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Popup</button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-body">

                        <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>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

相关问题
最新问题