Question

您一直致力于AngularJS POS系统在销售后需要打印收据。我显示销售摘要并使用ng-print打印包含销售摘要的div。我通常使用display：none表示所有其他元素，然后是display：block。有些行需要在一行中打印，所以我将它们设置为内联，但我不能在它们之间获得间距甚至对齐。

这是销售摘要的图像以及Desc，Price和Qty的间距。

这是html：

<div id="sales-summary">
                <div layout="column" class="sales-summary-headers" style="text-align: center" style="margin: 3px">
                    <div class="print-address">{{transaction.store.name}}</div>
                    <div class="print-address">{{transaction.store.address1}}</div>
                    <div class="print-address">{{transaction.store.address2}}</div>
                    <div class="print-address">{{transaction.store.address3}}</div>
                    <div class="print-address">{{transaction.store.contact}}</div>
                    <br/>
                    <div class="print-address">You were served by: {{transaction.employee.firstName}}</div>
                </div>
                <div class="sales-summary-headers">
                    <div style="text-align: center"> Sales Summary</div>    
                </div>
                <md-divider></md-divider>
                <div layout="row" class="print-row">
                    <div class="print-left" flex="65"><p>Desc</p></div>
                    <div class="print-mid" flex="15"><p>Qty</p></div>
                    <div class="print-right" layout-align="center end"><p>Price</p></div>
                </div>
                <md-divider></md-divider>
                <div layout="row" class="print-row" ng-repeat="item in saleItems">
                    <div class="print-left" flex="65">{{item.product.description}} </div>
                    <div class="print-mid" flex="15">{{item.quantity}} </div>
                    <div class="print-right" layout-align="center end">{{item.unitTotalDisplayPrice | currency:"€"}} </div>
                    <br/>
                </div>
                <md-divider></md-divider>
                <md-divider></md-divider>
                <div layout="row" class="print-row">
                    <div flex="80">Subtotal</div>
                    <div layout-align="center end">{{ subTotal | currency:"€" }}</div>
                </div>
                <div layout="row" class="print-row">
                    <div flex="80">Tax</div>
                    <div layout-align="center end">{{ tax | currency:"€" }}</div>
                </div>
                <div layout="row" class="print-row">
                    <div flex="80">Total</div>
                    <div layout-align="center end">{{ total | currency:"€" }}</div>
                </div>
                <md-divider></md-divider>
                <div style="text-align: center" class="sales-summary-headers">
                    <div>Payments</div> 
                </div>
                <md-divider></md-divider>
                <div layout="row" class="print-row" ng-repeat="payment in payments">
                    <div flex="80">{{ payment.type }}</div>
                    <div layout-align="center end">{{ payment.amount | currency:"€" }}</div>
                    <br/>
                </div>
                <md-divider></md-divider>
                <div layout="row" class="print-row">
                    <div flex="80">Change</div>
                    <div layout-align="center end">{{ transaction.changeValue | currency:"€"}}</div>
                </div>
                <div>
                    <div>
                        Some message for the store...
                    </div>
                </div>
                <br/>
                <div class="print-row" style="text-align: center" style="margin: 3px">
                    <h4>Till: {{ transaction.till.name }}</h4>
                </div>
            </div>
            <div layout="row" >
                  <md-button ng-print print-element-id="sales-summary">
               Print
              </md-button>
              <md-button ng-click="email()">
               Email
              </md-button>
              <span flex></span>
              <md-button ng-click="finishTransaction()" >
               Done
              </md-button>
    </div>

它仅打印id =＆＃34; sales-summary＆＃34;中的元素。

我试图在CSS中设置间距，但没有任何效果这是CSS的代码。它有点脏，因为我添加了背景颜色和文本颜色来尝试隔离元素并查看打印预览中占用的空间。

@media print {
body * {
    display:none;
}

md-sidenav * {
    display: none !important;
}

section  * {
    display: none !important;
}

#printSection, #printSection * {
    display: block;
}

#printSection {
    position:absolute;
    left:0;
    right: 0;
    top:0;
}
.print-row *{
    width:100%;
    display: inline !important;
    color: green;
    /*background-color: pink;*/
    margin: 2px;
}

.print-row div *{
    display: inline !important;
}



.print-left{
    text-align: left;
    width:65% !important;
    background-color: blue;
    color: black;
}

.print-mid p{

    width:65% !important;
    background-color: green;
    color: white;
}

.print-row{
    background-color: yellow;
    width:100% !important;
    /*font-size: 0pt;*/
}

.print-left{
    text-align: left;
    width:65% !important;
    /*font-size: 12pt;*/
}

.print-mid{
    width:15% !important;
    text-align: right;
    /*font-size: 12pt;*/
}

.print-right{
    width:20% !important;
    text-align: right !important;
    /*font-size: 12pt;*/
}

这是打印的内容。 desc，Qty Price之间没有间距。

非常感谢任何帮助。

Answer 1

我认为原因是这个选择器的规则：

.print-row *{

它将所有这些元素定义为内联元素，通过这些元素，width设置变得毫无意义。尝试将其设置为inline-block

CSS @Media Print - 内联元素的水平间距

1 个答案: