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

您好，我一直在开发AngularJS POS系统，销售后需要打印收据。我显示销售摘要，并使用ng print打印包含销售摘要的div。我通常使用display:none处理所有其他元素，然后剩下的就是display:block。有些行需要在一行中打印，所以我将它们设置为“内联”，但无法获得这些行之间的间距，甚至无法对齐

这是销售摘要的图像以及描述、价格和数量的间距。

以下是此文件的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>

这是指纹。描述、数量和价格之间没有间隔。

---

任何帮助都将不胜感激。

我认为原因在于此选择器的规则：

.print-row *{

它将所有这些元素定义为内联元素，通过内联元素，它们的

width

设置变得毫无意义。尝试将其设置为

内联块

.print-row *{