CSS @メディア印刷 - インライン要素の水平間隔

Question

こんにちはAngularJS POSシステムでは、販売後に領収書を印刷する必要があります。販売概要を表示し、ng-printを使用して販売概要を含むdivを印刷します。私はいつもディスプレイを使っています：他のすべての要素についてはnone、その後はdisplay：blockです。 1行で印刷する必要がある行がいくつかありますので、それらをインラインに設定しますが、これらの間にスペースを入れることはできません。

これは、販売概要とDesc、価格と数量のスペースのイメージです。

<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 = "売上サマリー" 内の要素だけを出力します。ここでは

は、このためにhtmlです。

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