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

您好一直在研究AngularJS POS系统需要在出售后打印收据。我显示销售摘要并使用ng-print打印包含销售摘要的div。我按照惯例做了显示：其他所有元素都没有，然后剩下的是display：block。有一些行需要在一行中打印，所以我将它们设置为内联，但我无法在这些行之间获得间距，甚至无法对齐。CSS @Media打印 - 内联元素的水平间距

这是销售摘要和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;*/ 
}

这里是打印。数量价格之间没有间隔。

任何帮助将不胜感激。

来源

2017-05-09 Colm O S

我认为原因是与此选择规则：

.print-row *{

它定义了所有这些元素作为内联元素，因此它们的width设置就变得毫无意义。尝试设置为inline-block

来源

2017-05-09 14:49:45 Johannes

这样做的伎俩。谢谢。 –

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

回答

相关问题