CSS @Media打印 - 內聯元素的水平間距

Question

您好一直在研究AngularJS POS系統需要在出售後打印收據。我顯示銷售摘要並使用ng-print打印包含銷售摘要的div。我按照慣例做了顯示：其他所有元素都沒有，然後剩下的是display：block。有一些行需要在一行中打印，所以我將它們設置爲內聯，但我無法在這些行之間獲得間距，甚至無法對齊。

這是銷售摘要和Desc，價格和數量間距的圖像。

下面是這個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 = 「銷售摘要」 中的元素。

我試圖在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;*/ 
} 

這裏是打印。數量價格之間沒有間隔。

任何幫助將不勝感激。

Answer 1

我認爲原因是與此選擇規則：

.print-row *{ 

它定義了所有這些元素作爲內聯元素，因此它們的width設置就變得毫無意義。嘗試設置爲inline-block